vue2和vue3导出页面为PDF格式：jspdf和html2canvas

一、vue2导出PDF使用步骤

1、安装html2canvas，将页面html转换成图片

npm install --save html2canvas

卸载：

npm uninstall html2canvas

指定版本安装：

npm install --save [email protected]

2、安装jspdf，将图片生成pdf

npm install jspdf --save

3、定义全局函数

在指定位置创建一个htmlToPdf.js文件，我个人习惯放在('src/components/utils/htmlToPdf')

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install(Vue, options) {
    Vue.prototype.exportToPdf = function(domId, fileName) {
      html2Canvas(document.getElementById(domId), {
        allowTaint: true
      }).then(function(canvas) {
        const contentWidth = canvas.width
        const contentHeight = canvas.height
        const pageHeight = contentWidth / 592.28 * 841.89
        let leftHeight = contentHeight
        let position = 0
        const imgWidth = 595.28
        const imgHeight = 592.28 / contentWidth * contentHeight
        const pageData = canvas.toDataURL('image/jpeg', 1.0)
        const 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(fileName + '.pdf')
      }
      )
    }
  }
}

4、在main.js中全局注册

import htmlToPdf from '@/components/utils/htmlToPdf'
Vue.use(htmlToPdf)

5、在需要的导出的页面调用我们的exportToPdf方法即可

<el-button style="float: right; background-color: lavender" @click="exportToPdf('pdfDom01', '企业信息')" >导出PDF</el-button>

二、html2canvas导出PDFtextarea多行问题

1、将textarea元素标签换成div

<el-form-item label="药材批号及批量定制原则:" >
        <div class="textarea">{{sVp.mmMcp}}</div>
<!--        <el-input v-model="sVp.mmMcp" :autosize="{ minRows: 4, maxRows: 4}" type="textarea" class="inputClass" size="small" style="width: 700px"/>-->
      </el-form-item>

2、设置样式，重点word-wrap: break-word;

.textarea {
    width: 700px;
    height: auto;
    min-height: 100px;
    resize: none;
    border: solid;
    border-radius: 5px;
    overflow: auto;
    border-color: #E5E7E8;
    /*color: rgb(181, 17, 4);*/
    display: inline-block;
    /* 允许长单词换行到下一行： */
    word-wrap: break-word;
  }

二、vue3导出PDF使用步骤

1、安装html2canvas，将页面html转换成图片

npm install --save html2canvas

2、安装jspdf，将图片生成pdf

npm install jspdf --save

3、定义全局函数

在指定位置创建一个htmlToPdf.js文件，我个人习惯放在('src/components/utils/htmlToPdf')

// 页面导出为pdf格式
import html2Canvas from 'html2canvas';
import jsPDF from 'jspdf';

const htmlToPdf = {
    getPdf(title, id) {
        html2Canvas(
            document.querySelector(id),
            {
                allowTaint: false,
                taintTest: false,
                logging: false,
                useCORS: true,
                dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
                scale: 4, //按比例增加分辨率
            }
        ).then((canvas) => {
            var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向
            var ctx = canvas.getContext('2d'),
                a4w = 190,
                a4h = 272, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
                imgHeight = Math.floor((a4h * canvas.width) / a4w), //按A4显示比例换算一页图像的像素高度
                renderedHeight = 0;

            while (renderedHeight < canvas.height) {
                var page = document.createElement('canvas');
                page.width = canvas.width;
                page.height = Math.min(imgHeight, canvas.height - renderedHeight); //可能内容不足一页

                //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
                page
                    .getContext('2d')
                    .putImageData(
                        ctx.getImageData(
                            0,
                            renderedHeight,
                            canvas.width,
                            Math.min(imgHeight, canvas.height - renderedHeight),
                        ),
                        0,
                        0,
                    );
                pdf.addImage(
                    page.toDataURL('image/jpeg', 1.0),
                    'JPEG',
                    10,
                    10,
                    a4w,
                    Math.min(a4h, (a4w * page.height) / page.width),
                ); //添加图像到页面，保留10mm边距

                renderedHeight += imgHeight;
                if (renderedHeight < canvas.height) {
                    pdf.addPage(); //如果后面还有内容，添加一个空页
                }
                // delete page;
                pdf.save(title + '.pdf')
            }
        });
    },
};

export default htmlToPdf;

5、使用

<template>
  <div>
    <div id="pdfDom">
      <p>这是一段文本</p>
      <img src="../assets/logo.png">
    </div>
    <el-button size="mini" type="primary" @click="pdfFunc" :loading="loadingag">
      转成pdf
    </el-button>
  </div>
</template>

<script>
import htmlToPdf from "@/components/utils/htmlToPdf";

export default {
  data() {
    return {
      loadingFlag: false
    }
  },
  methods: {
    // 容器id="pdfCompany"
    pdfFunc() {
      this.loadingFlag = true;    // 动画加载事件
      // 调用htmlToPdf工具函数
      htmlToPdf.getPdf('文件标题',"#pdfDom");
      // 定时器模拟按钮loading动画的时间
      setTimeout(() => {
        this.loadingFlag = false;
      }, 1000);
    }
  }
}
</script>

效果如下:

点击"转成pdf",