背景

提分加項(xiàng)目中遇到了一個(gè)需要前端對(duì)PDF頁(yè)面進(jìn)行分頁(yè)的需求。該需求是要為每一位學(xué)生生成一份PDF的學(xué)習(xí)報(bào)告，起初是采用了前端提供幾個(gè)頁(yè)面模板，由java端調(diào)用iText去生成PDF，PDF的分頁(yè)工作也由工具去完成。

但是由于頁(yè)面中包含大量的數(shù)學(xué)公式、圖片等一些對(duì)樣式要求較高的元素，iText對(duì)很多CSS3屬性的支持較差，生成的PDF經(jīng)常會(huì)出現(xiàn)切頁(yè)的情況。最后決定由前端生成分好頁(yè)的頁(yè)面，并提供一個(gè)方法導(dǎo)出當(dāng)前頁(yè)面的Dom節(jié)點(diǎn)，服務(wù)端通過(guò)訪問(wèn)該頁(yè)面并調(diào)用此方法得到分頁(yè)后的頁(yè)面元素，最后調(diào)用Node的一個(gè)工具生成PDF。

而對(duì)于前端PDF分頁(yè)的思路，大致分以下四步：

首先獲取后臺(tái)數(shù)據(jù)渲染頁(yè)面

頁(yè)面渲染好之后獲取每個(gè)元素的高度，通過(guò)一定的算法判斷各個(gè)元素應(yīng)該在哪一頁(yè)

對(duì)于跨頁(yè)的元素，采用前頁(yè)隱藏后頁(yè)定位的模式，使之在視覺(jué)上剛好能接起來(lái)

完成分頁(yè)

而在這個(gè)過(guò)程中因?yàn)槊恳豁?yè)的元素是有分頁(yè)后的數(shù)據(jù)所決定的，所以使用到了render函數(shù)。

代碼

拿出一個(gè)模塊的代碼來(lái)，類似的思路就是這樣，通過(guò)數(shù)據(jù)判斷當(dāng)前頁(yè)應(yīng)當(dāng)渲染的元素，然后通過(guò)render函數(shù)中的createElement方法創(chuàng)建頁(yè)面元素。

<script> import { mapActions, mapGetters, mapState } from "vuex"; import Top from "./components/Top.vue"; import Charts from "./components/Charts.vue"; import Table from "./components/Table.vue"; export default {name: "global-analysis",props: {page: { type: [Object], required: true },},components: { Top, Charts, Table },computed: {positionStyle () {return {position: 'absolute',width: '100%',top: -this.page.top + 'px',padding: '0px 28px',}},hiddenStyle () {return {position: 'relative',width: '100%',height: (1170 - this.page.hidden) + 'px',overflow: 'hidden'}}},render (createElement) {const children = []//根據(jù)數(shù)據(jù)加載指定模塊this.page.blocks.forEach((block, index) => {let component = ''if (block.name === 'global-analysis-top') {component = 'Top'} else if (block.name === 'global-analysis-charts') {component = 'Charts'} else if (block.name === 'global-analysis-table') {component = 'Table'} else {return}children.push(createElement(component, { props: { data: block.data } }))})//將模塊放入定位層const positionContainer = createElement('div',{ style: this.positionStyle, class: 'container-position', ref: 'position' },children)//將定位層放入遮罩層并返回return createElement('div',{ style: this.hiddenStyle, class: 'container-hidden', ref: 'hidden' },[positionContainer])} } </script>

其中createElement可以接收三個(gè)參數(shù)，第一個(gè)為所創(chuàng)建的html元素，第二個(gè)為相關(guān)屬性的數(shù)據(jù)對(duì)象，第三個(gè)為子節(jié)點(diǎn)。

具體教程可參考官方文檔：渲染函數(shù) & JSX

總結(jié)

以上是生活随笔為你收集整理的前端实现PDF分页与Vue中的render函数的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。