html2canvas + jspdf 纯前端HTML导出PDF的实现与问题

前言

        这几天接到一个需求，富文本编辑器的内容不仅要展示出来，还要实现展示的内容导出pdf文件。一开始导出pdf的功能是由后端来做的，然后发现对于宽度太大的图片，导出的pdf文件里部分图片内容被遮盖了，但在前端是正常显示的，只因为class样式后端无法解析。然后，后端开发人员就嫌麻烦，让前端来实现导出pdf的功能。。。

html2canvas（V1.4.1）

         html2canvas 用于将 html 元素渲染成图像，可以将整个页面或特定区域以图像形式进行捕获。这对于将复杂的 html 结构转换为 PDF 格式非常有用，因为它可以捕获 html 中的样式、布局和图像等细节。

        官网：https://html2canvas.hertzen.com/

引用

npm install html2canvas@1.4.1 --save
或
yarn add html2canvas@1.4.1
或
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

示例

<template>
  <div id="pdfBody" style="margin: 30px;">
    <input class="test_input" type="text" autocomplete="off" placeholder="输入框111"/>
    <input class="test_btn" id="testBtn" type="button" value="按钮"/>
  </div>
</template>

<script>
  import html2canvas from "@/utils/htmlToPdf/html2canvas.min";

  export default {
    name: "Test",
    mounted() {
      document.getElementById('testBtn').addEventListener('click', () => {
        this.canvasTest();
      });
    },
    methods: {
      createCanvas(dom) {
        html2canvas(dom, {
          useCORS: true, //允许跨域
          scale: 2, //按比例增加分辨率
          dpi: 200, //将分辨率提高到特定的DPI（每英寸点数）
          ignoreElements: (e) => {
            //过滤head、body等无用的标签元素
            return !(e.contains(dom) || dom.contains(e) || e.tagName === 'STYLE' || e.tagName === 'LINK');
          },
          onclone: (doc) => {
            //Scoped CSS无法直接应用，需要手动处理
            let inputDocArr = doc.getElementsByClassName('test_input');
            [].forEach.call(inputDocArr, inputDoc => {
              inputDoc.style.height = '36px';
              inputDoc.style.lineheight = '36px';
              inputDoc.style.width = '200px';
              inputDoc.style.margin = '20px';
              inputDoc.style.borderRadius = '5px';
              inputDoc.style.border = '1px solid #DCDFE6';
            });

            let btnDocArr = doc.getElementsByClassName('test_btn');
            [].forEach.call(btnDocArr, btnDoc => {
              btnDoc.style.color = '#FFFFFF';
              btnDoc.style.backgroundColor = '#1890ff';
              btnDoc.style.border = '1px solid #1890ff';
              btnDoc.style.height = '36px';
              btnDoc.style.width = '80px';
              btnDoc.style.borderRadius = '20px';
            });
          }
        }).then(canvas => {
          dom.appendChild(canvas);
        }).finally(() => {
          console.log('create canvas finish!');
        });
      },
      canvasTest() {
        let pdfBody = document.getElementById('pdfBody');
        this.createCanvas(pdfBody);
      }
    }
  }
</script>

<style scoped>
  .test_input {
    height: 36px;
    line-height: 36px;
    width: 200px;
    margin: 20px;
    border-radius: 5px;
    border: 1px solid #DCDFE6;
  }

  .test_input:focus {
    border: 1px