天津网站建设技术托管,阿里云安装wordpress出错求解,温江网站建设,制作网站项目流程前端如何生成pdf 开发背景#xff1a; 需要给页面中相应的内容生成pdf#xff0c;查找文档后发现要用到两个插件。html2canvas 以及 jsPDF html2canvas 给dom结构转化为canvas#xff0c;然后生成各种类型图片jsPDF 把canvas 生成的图片url 转化为pdf
// 插入图片
pdf.addI…前端如何生成pdf 开发背景 需要给页面中相应的内容生成pdf查找文档后发现要用到两个插件。html2canvas 以及 jsPDF html2canvas 给dom结构转化为canvas然后生成各种类型图片jsPDF 把canvas 生成的图片url 转化为pdf
// 插入图片
pdf.addImage(image, format, x, y, width, height, alias, compression, rotation)
// 保存为pdf
pdf.save(example.pdf);参数
image表示要插入的图片资源可以是图片文件的路径或者base64编码字符串。format表示要插入的图片格式包括‘JPEG’, ‘PNG’, ‘GIF’, ‘BMP’, ‘TIFF’, ‘RAW’, ‘JPEG2000’。x图片在PDF中的x轴坐标单位为pt点。y图片在PDF中的y轴坐标单位为pt点。width图片在PDF中的宽度单位为pt点。height图片在PDF中的高度单位为pt点。alias可选指定图片资源的别名。compression可选指定图片的压缩质量取值为0-1之间的浮点数。rotation可选指定图片的旋转角度取值范围为0-360之间的整数。
下面是dom转化为pdf 的基本代码
import html2canvas from html2canvas;
import jsPdf from jspdf;function printPDF () {const domElement document.getElementById(your-id);html2canvas(domElement, {onclone: (document) {document.getElementById(print-button).style.visibility hidden;}}).then((canvas) {const img canvas.toDataURL(image/png);const pdf new jsPdf();pdf.addImage(imgData, JPEG, 0, 0, width, height);pdf.save(your-filename.pdf);
})需要特别注意一下 html2canvas onclone 方法。它是当DOM被克隆后进行渲染时的回调函数可用于修改将要渲染的内容而不会影响原始DOM。当你需要在生成快照前操作 DOM例如隐藏打印按钮时会非常有用。
难点突破
1. 使用html2canvas转为图片遇到跨域问题
跨域图片不会生成由于跨域的问题比如图片在第三方存放导致图片不会被绘制需要多方配置 1. html2canvas的配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用) 2. img标签增加 crossOriginanonymous 3. 图片服务器配置Access-Control-Allow-Origin 或使用代理 其中第三步是最重要的,不设置则前两步设置了也无效。 如果后端不能改图片服务器咱们前端也能设置图片代理例如nginx server配置 location /img {proxy_pass 服务器真正地址;}2. html2canvas转化的图片ios设备长按可以保存Android设备长按无法保存
原因分析转换后使用canvas.toDataURL拿到的是base64的图片此图片可以直接展示在网页上但是在Android设备上长按此图片无法保存ios设备可以长按保存原因是Android无法长按保存base64的图片解决办法可以考虑将图片先上传到服务器拿到url再展示
3. safir长按保存不了图片
使用-webkit-touch-calloutdefault不规范的属性iOS 2.0及更高版本的Safari浏览器可用
4. 生成的图片中若包含二维码,微信长按图片偶现无法识别
不使用路由切换使用window.location.href直接跳转刷新页面
5. 生成的PDF超出一页后分页问题
需要计算图片的宽高一页展示多少
看详细代码
printPDF(id, name){const domElement document.getElementById(id);html2canvas(domElement, {allowTaint: false,useCORS: true, // 用于解决图片跨域onclone: (document) {document.getElementById(print-button).style.visibility hidden;}}).then((canvas) {const fileName name (new Date()).toLocaleString() .pdfvar pdf new jsPdf(p, mm, a4); // A4纸纵向var ctx canvas.getContext(2d);var a4w 190; var a4h 277; // A4大小210mm x 297mm四边各保留10mm的边距显示区域190x277var imgHeight Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度var renderedHeight 0;while (renderedHeight canvas.height) {var page document.createElement(canvas);page.width canvas.width;page.height Math.min(imgHeight, canvas.height - renderedHeight);// 可能内容不足一页 // 用getImageData剪裁指定区域并画到前面创建的canvas对象中page.getContext(2d).putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);pdf.addImage(page.toDataURL(image/jpeg, 1.0), JPEG, 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); // 添加图像到页面保留10mm边距renderedHeight imgHeight;if (renderedHeight canvas.height) {pdf.addPage();// 如果后面还有内容添加一个空页}// delete page;}// 保存文件pdf.save(fileName);})}
