背景

提分加項目中遇到了一個需要前端對PDF頁面進行分頁的需求。該需求是要為每一位學生生成一份PDF的學習報告，起初是采用了前端提供幾個頁面模板，由java端調用iText去生成PDF，PDF的分頁工作也由工具去完成。

但是由于頁面中包含大量的數學公式、圖片等一些對樣式要求較高的元素，iText對很多CSS3屬性的支持較差，生成的PDF經常會出現切頁的情況。最后決定由前端生成分好頁的頁面，并提供一個方法導出當前頁面的Dom節點，服務端通過訪問該頁面并調用此方法得到分頁后的頁面元素，最后調用Node的一個工具生成PDF。

而對于前端PDF分頁的思路，大致分以下四步：

首先獲取后臺數據渲染頁面

頁面渲染好之后獲取每個元素的高度，通過一定的算法判斷各個元素應該在哪一頁

對于跨頁的元素，采用前頁隱藏后頁定位的模式，使之在視覺上剛好能接起來

完成分頁

而在這個過程中因為每一頁的元素是有分頁后的數據所決定的，所以使用到了render函數。

代碼

拿出一個模塊的代碼來，類似的思路就是這樣，通過數據判斷當前頁應當渲染的元素，然后通過render函數中的createElement方法創建頁面元素。

<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 = []//根據數據加載指定模塊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可以接收三個參數，第一個為所創建的html元素，第二個為相關屬性的數據對象，第三個為子節點。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。