前端实现PDF分页与Vue中的render函数

背景

提分加项目中遇到了一个需要前端对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函数相关推荐

vue中的render函数
vue中的render函数的使用我们先看一个例子: render: function (createElement) {return createElement('h1', this.blogTit ...
vue中的render函数、h（）函数、函数式组件
一.什么是render 官网:用于编程式地创建组件虚拟 DOM 树的函数. 在我们使用webpack脚手架创建项目时,都能在main.js中看到一个render函数 import Vue from ' ...
vue中的render函数介绍
render函数是什么简单的说,在 vue 中我们使用模板HTML语法组建页面的,使用 render 函数我们可以用js语言来构建DOM. 因为vue是虚拟DOM,所以在拿到template模板时也 ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
vue 执行函数this_在vue中使用回调函数,this调用无效的解决
let self = this //使用新变量替换this,以免this无效 //updatestudentinfotoserver是一个将本身部分数据异步上传的接口,接收三个参数,其中第一个是数据, ...
vue中class绑定函数
vue中class绑定函数 vue+class类应用函数,增加class类名相关博客: v-for循环.v-if 动态判断+动态赋值+操作class类:(计算属性)强制绑定函数以上就是关于&quo ...
mounted钩子函数_怎样实现Vue中mounted钩子函数获取节点高度
这次给大家带来怎样实现Vue中mounted钩子函数获取节点高度,实现Vue中mounted钩子函数获取节点高度的注意事项有哪些,下面就是实战案例,一起来看一下. 遇到的问题最近在开发一个Vue的项 ...
Vue中使用find函数
Vue中使用find函数 find函数基本使用方法: // An highlighted block this.result = this.imgItems.find(item => item. ...
Vue中的 h 函数
Vue中的 h 函数在了解 h 函数之前,我们需要先了解虚拟DOM, 什么是虚拟DOM? 虚拟DOM 是使用JS 对象模拟真实的DOM结构,用JavaScript 对象描述DOM 的层次结构.D ...
vue 前端显示图片加token_前端甩锅神器：vue中的mock使用
首先声明,本文所介绍的方法,只是用于,在做好前端联调的本分工作之余,把前后端联调责任划清界限,并不用于帮后端定位问题(当然,mock也有更全面的方法促进项目的进行,小女不才,在此不提供介绍): 跟陌生 ...

前端实现PDF分页与Vue中的render函数

背景

代码

前端实现PDF分页与Vue中的render函数相关推荐

最新文章

热门文章