前端 html2canvas jspdf 实现指定容器打印

最新推荐文章于 2024-03-30 14:50:21 发布

codersole

最新推荐文章于 2024-03-30 14:50:21 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/Link_Anew/article/details/133384436

博客介绍了前端插件html2canvas和jspdf的使用步骤，包括通过npm下载安装，创建插件，将其挂载到main.js，最后进行使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载 npm i html2canvas jspdf --save

创建一个插件

import html2Canvas from "html2canvas";
import JsPDF from "jspdf"

export default {
  install(Vue, options) {
    Vue.prototype.htmlToPdf = (id, title) => {
      const elementId = document.getElementById(`${id}`)
      const opts = {
        scale: 12, // 缩放比例，提高生成图片清晰度
        useCORS: true, // 允许加载跨域的图片
        allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
        tainttest: true, // 检测每张图片已经加载完成
        logging: true, // 日志开关，发布的时候记得改成 false
      };
      html2Canvas(elementId, opts).then((canvas) => {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        // 一页pdf显示html页面生成的canvas高度;
        let pageHeight = (contentWidth / 592.28) * 841.89;
        // 未生成pdf的html页面高度
        let leftHeight = contentHeight;
        // 页面偏移
        let position = 0;
        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);

        // a4纸纵向，一般默认使用；new JsPDF('landscape'); 横向页面
        let PDF = new JsPDF("", "pt", "a4");

        // 当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
          // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
          PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          // 超过一页时，分页打印（每页高度841.89）
          while (leftHeight > 0) {
            PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            if (leftHeight > 0) {
              PDF.addPage();
            }
          }
        }
        PDF.save(title + ".pdf");
      })
        .catch((error) => {
          console.log("打印失败", error);
        });
    }
  }
}

挂载到main.js

import htmlToPdf from "./utils/printpdf";
Vue.use(htmlToPdf);

使用

methods: {
 handlePdf() {
      document.body.scrollTop = 0; // IE的
      document.documentElement.scrollTop = 0; // 其他
      // 参数一是所打印的dom容器id 参数二是pdf名称
      this.htmlToPdf("pdfDom", "统计报告");
    },
}