vue2前端实现html导出pdf功能_vue前端导出pdf_一个大萝北的博客

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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);
解释：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
	</div>
5. 问题
 
会出现衔接问题 
防止截断可以参考这个博客https://www.cnblogs.com/jimyking/p/17101947.html 
等有时间再自己总结
                                    1、使用html2canvas和jspdf插件实现
这个方式是通过html2canvasl来把html页面转换成图片，然后再通过jspdf将图片转换为pdf文件
    （1）缺点
生成的pdf质量不高，画面有些模糊，失真严重
如果在分页的地方有图片的话，可能会把图片也给你一分为二了
    （2）安装插件
npm install --save html2canvas
npm install jspdf ...
                                    最近有需求做表单导出，就又花时间研究了一下html转图片导出，前面也做过证书打印，但是前面只是一页pdf没什么问题，今天想试试多页pdf导出会有什么问题，果然，问题很多，我搞了一早上，唉，如下（先说问题，后面再说导出方法哈）
html转Pdf问题点1.文字显示有问题，总是有一个字显示不全2.图片显示问题**3.设置页边距****4.水印****5.清晰度****6. 滚动影响**实现方法：**1.全部内容导出一张pdf****2.a4分页导出**
1.文字显示有问题，总是有一个字显示不全
                                    通过使用jsPDF库，我们可以轻松地实现HTML导出PDF功能。在Vue2中，我们可以将导出PDF的方法添加到组件的方法中，并在需要时调用它。希望本文对您有所帮助。
cnpm install --save html2canvas   // 将页面html转换成图片
cnpm install jspdf --save  // 将图片生成pdf
2、定义全局函数..创建一个htmlToPdf.js文件在指定位置
import html2Canvas from 'html2canvas'
import JsPDF from 'js...
npm i import JsPDF from 'jspdf'
步骤2：创建一个htmlToPdf.js的js文件, 然后在main.js中全局引用一下，编写如下代码：
// htmlToPdf.js
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  insta