vue2前端实现html导出pdf功能

news2024/12/24 11:36:17

1. 功能实现方案

1.html转换成canvas后生成图片导出pdf（本文选用）

html转canvas插件：html2canvas是一款将HTML代码转换成Canvas的插件；
canvas生成pdf：jsPDF是一个使用Javascript语言生成PDF的开源库

2.HTML代码转出pdf

wkhtmltopdf是一款将HTML代码转换成pdf的插件，表格场景使用居多

2.技术实现（基于html2canvas和jsPDF实现）

1.安装插件

npm install html2canvas
npm install jspdf

2.封装函数

这里函数参考了网上多种，最后自己选择了这种并发并修改了部分内容，实现可以传入两个参数来指定要导出为pdf的文件

src/utils/topdf.js

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

export default {
  install(Vue, options) {
    console.log(options);
    // vue原型上挂载getPdf方法实现转换功能
    // 参数：（dom元素，导出文件的文件名）
    Vue.prototype.getPdf = function (dom, title) {
      html2Canvas(document.querySelector(dom), {
        allowTaint: true,
      }).then(function (canvas) {
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let pageHeight = (contentWidth / 592.28) * 841.89;
        let leftHeight = contentHeight;
        let position = 0;
        let imgWidth = 595.28;
        let imgHeight = (592.28 / contentWidth) * contentHeight;
        let pageData = canvas.toDataURL("image/jpeg", 1.0);
        let PDF = new JsPDF("", "pt", "a4");
        if (leftHeight < pageHeight) {
          PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
        } else {
          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");
      });
    };
  },
};

3.全局注册

在main.js中导入并注册

//全局注册 打印pdf：
import htmlToPdf from "./utils/topdf";
Vue.use(htmlToPdf);

4.使用

解释：1.为需要打印的dom元素添加类名或者id名以方便获取dom

2.给打印按钮添加点击事件

2.1 点击事件触发全局挂载的getPdf方法

2.2 参数为（dom元素，导出pdf的文件名）

<button @click="getPdf('.pdf', 'file2')">导出pdf</button>
    <div class="pdf">
      <p v-for="(item, index) in 50" :key="index">
        {{ item }}123123121322313212313132123
      </p>
	</div>