页面导出成PDF

主要使用html2canvas（将页面转成图片）和jspdf（将图片转成pdf）

npm install --save html2canvas

npm install jspdf --save

创建htmlToPdf.js/.ts文件 可以放 在utils里

// 页面导出为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;

页面使用：

 

<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>

参考:vue2和vue3导出页面为PDF格式：jspdf和html2canvas - 周文豪 - 博客园 (cnblogs.com)