html2canvas+jsPDF实现前端导出pdf

html2canvas+jsPDF实现前端导出pdf

  1. 安装插件包
javascript 复制代码
npm install jspdf
npm install html2canvas
  1. 引入插件
javascript 复制代码
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
  1. 生成pdf
javascript 复制代码
        const perCanvas = document.createElement('canvas');
        perCanvas.style.backgroundColor = '#fff'
        const context = perCanvas.getContext('2d');
        html2canvas(this.$refs.pdfContent, {
          scale: 4, //放大防止模糊
          dpi: 300 // 处理模糊问题
        }).then((canvas) => {
          const canvasData = canvas.toDataURL('image/jpeg', 1.0);
          // pdf的尺寸
          const pdfWidth = canvas.width;
          const pdfHeight = pdfWidth * 1.414;
          //切割后的canvas图片的宽高,就等于每页pdf的宽高
          perCanvas.width = canvas.width;
          perCanvas.height = pdfHeight;
          // 每张图片的高度:适当减少100,上下各留50页边距
          const perHeight = pdfHeight - 100;

          // 计算切割次数
          let splitCount = Math.ceil(canvas.height / perHeight);
          if (splitCount * perHeight < canvas.height) splitCount++;

          //创建img对象,加载完整的canvas图片
          const img = new Image();
          img.src = canvasData;

          //创建pdf对象

          //待图片加载完成
          setTimeout(() => {
            let pdf = new jsPDF('p', 'pt', [pdfWidth, pdfHeight]);
            //切割canvas图片,贴到每一页pdf中
            for (let i = 0; i < splitCount; i++) {
              const startY = i * perHeight; // 起始y坐标
              // 清空画布
              context.clearRect(0, 0, perCanvas.width, pdfHeight);
              context.fillStyle = '#fff';
              context.fillRect(0, 0, perCanvas.width, pdfHeight);
              // 绘制当前切割区域的图片
              context.drawImage(img, 0, startY, perCanvas.width, perHeight, 0, 0, perCanvas.width, perHeight);
              const perCanvasData = perCanvas.toDataURL('image/jpeg', 1.0);
              pdf.addImage(perCanvasData, 'JPEG', 0, 50, perCanvas.width, perCanvas.height, '', 0);
              if (i < splitCount - 1) pdf.addPage();
            };

            let pdfBlob = pdf.output('blob');
            // pdf.save("content.pdf"); 执行此api会直接下载
            this.showpdf = false
            let signBlob = new FormData() //把文件上传到后台
            signBlob.append('file', pdfBlob, ".pdf")
            //此处将signBlob上传即可
          }, 0)
相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法