html2pdf：如何从 PDF 中隐藏 <div>？

Question

我正在使用 html2pdf

我可以生成发票的 PDF，但我不想<div class="div-dont-want-to-display">在我的 PDF 上显示，我该怎么做？

我的Vue.js Component：

    <template>
      <div class="invoice p-3 mb-3" id="mydiv">

      <div class="div-dont-want-to-display">

      <!-- AND MANY MORE DIV'S -->

      <!--BUTTON TO DOWNLOAD PDF-->
        <a href @click.prevent="createPDF"class="btn btn-primary float-right">
          <i class="fa fa-download"></i> Generate PDF </a>
      </div>
    </template>

方法createPDF()：

import html2pdf from 'html2pdf.js'

export default {

  methods: {
    createPDF() {
      var element = document.getElementById('mydiv');

      var opt = {
        margin: 0,
        filename: 'myfile.pdf',
        image: {type: 'jpeg',quality: 0.98},
        html2canvas: {scale: 2},
        jsPDF: {
          unit: 'mm',
          format: [280, 350],
          orientation: 'portrait'
        }
      };

      html2pdf().set(opt).from(element).save();
    },
  }
}

Answer 1

您可以使用库HTML2PDF使用jsPDF和html2canvas。

该库根据您作为参数传递的 div 图像创建 PDF。

导入后调用lib的代码如下：

var element = document.getElementById('content');
html2pdf(element);

<div id="content">
  Test
</div>

您也可以传递一些选项，有关 lib 的 github 的更多详细信息。

您可以使用以下标签隐藏一些元素：

<div id="element-to-hide" data-html2canvas-ignore="true"></div>