使用 html2canvas 和 jspdf 将页面转 pdf,同时解决当页面过长时,页面白屏问题

代码如下,直接粘贴复制即可,代码中 jspdf 是全局引入,你可以自己局部引入

别人使用标签的方式来显示 base64,但是当页面过长时,base64 大小过大会导致页面解析异常,显示白屏

ts 复制代码
import html2canvas from 'html2canvas';

export function printPdf(dom: HTMLElement | null) {
  // 1 dom 存在
  if (!dom) return;
  // 2 生成 canvas
  html2canvas(dom, { useCORS: true, allowTaint: true }).then(function (canvas) {
    // document.body.appendChild(canvas);
    // return;
    // 1 canvas 宽高
    const contentWidth = canvas.width;
    const contentHeight = canvas.height;
    console.log('contentWidth contentHeight', contentWidth, contentHeight);

    // 2 一页 pdf 显示 html 页面生成的 canvas 高度
    const pageHeight = (contentWidth / 592.28) * 841.89;
    // 3 未生成 pdf 的 html 页面高度
    let leftHeight = contentHeight;
    // 4 pdf 页面偏移
    let position = 0;
    // 5 a4纸的尺寸 [595.28, 841.89],html 页面生成的 canvas 在 pdf 中图片的宽高
    const imgWidth = 595.28;
    const imgHeight = (592.28 / contentWidth) * contentHeight;
    const img = canvas.toDataURL('image/jpeg', 1.0);
    const pdf = new jspdf.jsPDF('', 'pt', 'a4');
    // 有两个高度需要区分,一个是html页面的实际高度,和生成 pdf 的页面高度(841.89)
    // 当内容未超过 pdf 一页显示的范围,无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(img, 'JPEG', 0, 0, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        console.log(imgWidth, imgHeight, position, leftHeight);
        pdf.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
        leftHeight -= pageHeight;
        position -= 841.89;
        // 避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    // 6 挂载至页面
    const blob = dataURLtoBlob(pdf.output('datauristring'));
    console.log(blob);
    const url = window.URL.createObjectURL(blob); //获得一个pdf的url对象
    location.href = url;
    // window.open(url, '_blank')//打开一个新窗口
    // console.log(url);
    // URL.revokeObjectURL(url) //释放内存
    // const base64String = btoa(pdf.output());
    // const embed = `<embed type="application/pdf" src="data:application/pdf;base64, ${base64String}" width="100%" height="100%">`;
    // document.documentElement.style.overflow = 'hidden';
    // document.body.innerHTML = embed;
  });
}
相关推荐
拉不动的猪11 分钟前
SDK与API简单对比
前端·javascript·面试
runnerdancer13 分钟前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu20 分钟前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风26 分钟前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发38 分钟前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中1 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron
泯泷1 小时前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构