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-heigh
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值