前端生成pdf之html2canvas+jsPDF,以及解决图片不显示bug

前端如何生成pdf

开发背景: 需要给页面中相应的内容生成pdf,查找文档后发现要用到两个插件。html2canvas 以及 jsPDF

  • html2canvas 给dom结构转化为canvas,然后生成各种类型图片
  • jsPDF 把canvas 生成的图片url 转化为pdf
javascript 复制代码
// 插入图片
pdf.addImage(image, format, x, y, width, height, alias, compression, rotation)
// 保存为pdf
pdf.save("example.pdf");

参数

  1. image:表示要插入的图片资源,可以是图片文件的路径或者base64编码字符串。
  2. format:表示要插入的图片格式,包括:'JPEG', 'PNG', 'GIF', 'BMP', 'TIFF', 'RAW', 'JPEG2000'。
  3. x:图片在PDF中的x轴坐标,单位为pt(点)。
  4. y:图片在PDF中的y轴坐标,单位为pt(点)。
  5. width:图片在PDF中的宽度,单位为pt(点)。
  6. height:图片在PDF中的高度,单位为pt(点)。
  7. alias(可选):指定图片资源的别名。
  8. compression(可选):指定图片的压缩质量,取值为0-1之间的浮点数。
  9. rotation(可选):指定图片的旋转角度,取值范围为0-360之间的整数。

下面是dom转化为pdf 的基本代码

javascript 复制代码
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:trueuseCORS:true(二者不可共同使用)

  2. img标签增加 crossOrigin='anonymous'

  3. 图片服务器配置Access-Control-Allow-Origin 或使用代理

其中第三步是最重要的,不设置则前两步设置了也无效。

如果后端不能改图片服务器,咱们前端也能设置图片代理,例如nginx server配置

bash 复制代码
	location /img {
		proxy_pass 服务器真正地址;
	}

2. html2canvas转化的图片,ios设备长按可以保存,Android设备长按无法保存

  1. 原因分析:转换后使用canvas.toDataURL拿到的是base64的图片,此图片可以直接展示在网页上,但是在Android设备上长按此图片无法保存,ios设备可以长按保存;原因是Android无法长按保存base64的图片,
  2. 解决办法:可以考虑将图片先上传到服务器拿到url再展示

3. safir长按保存不了图片

使用-webkit-touch-callout:default不规范的属性,iOS 2.0及更高版本的Safari浏览器可用

4. 生成的图片中若包含二维码,微信长按图片偶现无法识别

不使用路由切换,使用window.location.href直接跳转刷新页面

5. 生成的PDF超出一页后分页问题

  1. 需要计算图片的宽高,一页展示多少

看详细代码

javascript 复制代码
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() + '.pdf'
           var pdf = new jsPdf('p', 'mm', 'a4'); // A4纸,纵向
           var ctx = canvas.getContext('2d');
           var a4w = 190; var a4h = 277; // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
           var 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);
             
       })
 }
相关推荐
Devil枫25 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
Yaml41 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js