vps搭建网站需要空间,赣州信息港官网,wordpress 4.7 教程,电脑上不了建设厅网站前端导出PDF的方法不多#xff0c;常见的就是利用canvas画布渲染#xff0c;再结合jspdf导出PDF文件#xff0c;代码也不复杂#xff0c;网上的代码基本都可以拿来即用。 如果不是特别追求完美的情况下#xff0c;或者导出PDF内容单页的话#xff0c;那么基本上也就满足业… 前端导出PDF的方法不多常见的就是利用canvas画布渲染再结合jspdf导出PDF文件代码也不复杂网上的代码基本都可以拿来即用。 如果不是特别追求完美的情况下或者导出PDF内容单页的话那么基本上也就满足业务需求了。但是如果你需要导出PDF的内容又多又复杂呢 目录
1.PDF常规导出
2.问题1水印
3.问题2导出黑屏与空白
4.问题3分页与截断
5.结束语 1.PDF常规导出 刚接触这个需求的时候lz想的是能实现将当前网页内容导出PDF下载即可。因为这也符合常规业务需求逻辑也没有考虑其他的因此参考了几篇网上的博文很快就选定了vue项目中利用html2canvasjspdf来实现导出PDF。 所以很快就实现了。在此基础上还满足了可以动态进行PDF分页dom节点的划分 ,并且觉得就这就这蜜汁自信不自量力的lz还马上写了一篇博客下面附上博客地址内附源码。
vue2利用html2canvasjspdf动态生成多页PDF_html2pdf 多页-CSDN博客 如果诸位的导出pdf内容很简单那上面的博文应该大概或许能助尔等一臂之力。导出过程中有其他疑难杂症的咱们接着往下看。
2.问题1水印 给导出的PDF加上水印这个需求很合理吧毕竟版权和文件安全意识还是要有的。对于这个需求想要解决也很简单。对应的依赖如watermark-dom但是lz在用的时候发现这个水印一旦加上就甩都甩不掉全局都附带上了而且在导出的时候PDF文件上竟然也没带上水印wtf
不信邪的可以试试也有可能是项目的差异性呢呵呵哒...
依赖安装
npm install watermark-dom --save
在你要用到水印的页面引入
import watermark from watermark-dom;export default {name:PDF,data() {return {compony:多页PDF导出}},mounted() {//该水印依赖可用但是导出文件后不会带上this.$nextTick(() { var waterdom document.getElementById(pdfinsurancepdf); var height waterdom.offsetHeight;console.log(waterdom,height)watermark.load({watermark_id: wm_div_id,watermark_parent_node:pdfinsurancepdf, //水印插件挂载的父元素element,不输入则默认挂在body上watermark_txt: PDF导出, //水印的内容watermark_fontsize:24px, //水印字体大小watermark_x_space:100, //水印x轴间隔watermark_y_space:100, })})},destroyed() {watermark.remove();},
} 如果上面的方法不好用你可以试试这个推荐方法
通过js操作dom的方式创建vue自定义指令来动态的给dom元素加上水印。
优点创建后全局可用精准性高指哪打哪而且导出的PDF精准的附带了水印由于是通过js来实现的可塑性强可通过直接改js文件来二次调整适应需求变化
在untils目录下创建watermark.js文件
const globalCanvas null
const globalWaterMark null// watermark 样式
let style
display: block;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: repeat;
pointer-events: none;const getDataUrl ({ font, fillStyle, textAlign, textBaseline, text, rotate -20 }) {font font || 25px normalfillStyle fillStyle || rgba(180, 180, 180, 0.2)text text || const canvas globalCanvas || document.createElement(canvas)const ctx canvas.getContext(2d) // 获取画布上下文ctx.rotate((rotate * Math.PI) / 180)ctx.font fontctx.fillStyle fillStylectx.textAlign textAlign || leftctx.textBaseline textBaseline || middlectx.fillText(text, canvas.width / 10, canvas.height / 2)return canvas.toDataURL(image/png, 1) // 第二个参数为质量
}const setWaterMark (el, binding) {//const parentElement el.parentElementconst parentElement el// 获取对应的 canvas 画布相关的 base64 urlconst url getDataUrl(binding)// 创建 waterMark 父元素const waterMark globalWaterMark || document.createElement(div)waterMark.className water-mark // 方便自定义展示结果style ${style}background-image: url(${url});waterMark.setAttribute(style, style)// 将对应图片的父容器作为定位元素parentElement.setAttribute(style, position: relative;)// 将图片元素移动到 waterMark 中parentElement.appendChild(waterMark)
}// 监听 DOM 变化
const createObserver (el, binding) {const waterMarkEl el.parentElement.querySelector(.water-mark)const observer new MutationObserver((mutationsList) {if (mutationsList.length) {const { removedNodes, type, target } mutationsList[0]const currStyle waterMarkEl?waterMarkEl.getAttribute(style):;// 证明被删除了if (removedNodes[0] waterMarkEl) {observer.disconnect()// 重新添加水印dom监听init(el, { value: binding })} else if (type attributes target waterMarkEl currStyle ! style) {waterMarkEl.setAttribute(style, style)}}})observer.observe(el.parentElement, {childList: true,attributes: true,subtree: true})
}// 初始化
const init (el, binding) {// 设置水印setWaterMark(el, binding.value)// 启动监控createObserver(el, binding.value)
}// 定义指令配置项
const directives {inserted(el, binding) {init(el, binding)}
}export default {name: watermark,directives
}
main.js进行全局指令注入
import waterMark from /utils/watermark.js
Vue.directive(watermark, waterMark.directives) 后面就可以在你需要导出PDF的dom上附带指令添加水印即可
div idpage1 v-watermark{ text: 这是水印 }img src/assets/pdfhead.png stylewidth:100%;height:auto; alt封面 /
/div
3.问题2导出黑屏与空白 原因分析关于这个问题lz是在苹果移动端遇到的谷歌浏览器和安卓环境下都能正常导出但是在ios移动端导出时就出现了黑屏的情况而且出现黑屏的这一段pdf刚好涉及到多页pdf单页的pdf却是正常的。网上说各种原因的都有看的很头痛。直到lz无意中看到了一个说法
tips:这里PDF大小指常规a4纸大小A4大小210mm x 297mm 不同主流浏览器以及移动终端针对canvas画布的大小有对应的限制而导出PDF原理恰好就是通过将当前网页内容通过canva渲染成图片再导出pdf的。 安卓端绘制canvas大小转化成PDF大概是10几页 苹果端绘制canvas大小转化成PDF大概5~6页 而lz黑屏的地方正好是要一次性生成9页pdf按照这个思路一测果然真相大白 解决办法就是分页节点细化避免绘制canvas画布大小超出限制。
4.问题3分页与截断 对于将网页内容导出pdf出现截断问题算是老生常谈的问题了。对于固定的内容我们可以指定分页节点再合并导出一个PDF文件不用考虑分页出现截取的情况。但是对于动态的dom内容无法指定分页节点我们在一股脑导出让其自动分页的情况下就很容易出现文字被截取表格被截取的情况。 网上的解决办法也五花八门什么限制高度啊动态计算文字高度啊动态计算分页节点啊。一看就头大。直到lz看到了一篇这样的示例
vue-pdf2: 纯前端导出版本2(回炉重制版已解决分页截断页眉页脚页码页边距模糊等情况
根据封装的参数来看也算是能满足很多常规业务需求了。
/*** 生成pdf(处理多页pdf截断问题)* param {Object} param* param {HTMLElement} param.element - 需要转换的dom根节点* param {number} [param.contentWidth550] - 一页pdf的内容宽度0-595* param {number} [param.contentHeight800] - 一页pdf的内容高度0-842* param {string} [param.outputTypesave] - 生成pdf的数据类型添加了file类型其他支持的类型见http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#output* param {number} [param.scalewindow.devicePixelRatio * 2] - 清晰度控制,canvas放大倍数,默认像素比*2* param {string} [param.directionp] - 纸张方向l横向p竖向默认A4纸张* param {string} [param.fileNamedocument.pdf] - pdf文件名当outputTypefile时候需要加上.pdf后缀* param {number} param.baseX - pdf页内容距页面左边的高度默认居中显示为(A4宽度 - contentWidth) / 2)* param {number} param.baseY - pdf页内容距页面上边的高度默认 15px* param {HTMLElement} param.header - 页眉dom元素* param {HTMLElement} param.footer - 页脚dom元素* param {HTMLElement} param.headerFirst - 第一页的页眉dom元素如果需要指定第一页不同页眉时候再传这个,高度可以和其他页眉不一样)* param {HTMLElement} param.footerFirst - 第一页页脚dom元素* param {string} [param.groupNamepdf-group] - 给dom添加组标识的名字分组代表要进行分页判断当前组大于一页则新起一页否则接着上一页* param {string} [param.itemNamepdf-group-item] - 给dom添加元素标识的名字,设置了itemName代表此元素内容小于一页并且不希望被拆分子元素也不需要遍历即手动指定深度终点优化性能* param {string} [param.editorNamepdf-editor] - 富文本标识类* param {string} [param.tableSplitNameel-table__row] - 表格组件内部的深度节点* param {string} [param.splitNamepdf-split-page] - 强制分页某些情况下可能想不同元素单独起一页可以设置这个类名* param {string} [param.isPageMessagefalse] - 是否显示当前生成页数状态* param {string} [param.isTransformBaseYfalse] - 是否将baseY按照比例缩小(一般固定A4页边距时候可以用上)* param {Array} [param.potionGroup[]] - 需要计算位置的元素属性格式是 data-positionxxx需要同时在节点上加上param.itemName如p data-positionp-position classpdf-group-item/p* returns {Promise} 根据outputType返回不同的数据类型,是一个对象*/export class PdfLoader {...
}
测试用例效果 5.结束语 如果你要问最终lz选择了什么方法来解决我会告诉你我选择了交给后端。不可否认前端是万能的确实能实现将网页内容导出PDF但是话又说回来经过和产品沟通发现后端Java通过依赖工具包生成的PDF竟然效果更好 所以需要复杂的PDF导出就让后端来吧别问问就是前端和后端的相爱相杀~ 别遇到什么事都自己抗沟通最重要~
