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

【问题标题】：html2pdf: How To Hide <div> From PDF?html2pdf：如何从 PDF 中隐藏 <div>？
【发布时间】：2019-11-29 22:18:53
【问题描述】：

我正在使用html2pdf

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

我的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();
    },
  }
}

【问题讨论】：

你想从什么生成 PDF？
@CodyG。当然，我清楚地提到了它。我想以 PDF 格式下载 <div class="invoice">。
@LucasOliveira 我正在生成带有 HELLO WORLD 的 PDF。但我不知道如何使用<div class="invoice">下载PDF
@CodyG。这样做了，什么都没有，没有错误，没有响应，什么都没有......
我想我应该使用 html2pdf ....

标签： javascript html vue.js jspdf

【解决方案1】：

您可以使用使用 jsPDF 和 html2canvas 的库 html2pdf。

lib 从您作为参数传递的 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>

【讨论】：

@LucaOliveira 我可以下载 PDF，但是我想在 PDF 中隐藏一个页脚，我该怎么做？
@SaifZakir 编辑答案试试看！
@LucasReis 谢谢！！一直在寻找这个！
@LucasReis 谢谢！我以为它会很简单，但在任何地方都找不到。

【解决方案2】：

您需要将id 添加到您的 div 中，如下所示：

  <div id="toprint" class="invoice" >
    ....

并在方法中获取该 div 的内容：

   let pdfName = 'test'; 
   var doc = new jsPDF();
   let content=document.getElementById("toprint").outerHTML
    doc.text(content, 10, 10);
    doc.save(pdfName + '.pdf');

或使用浏览器中的默认打印功能：

createPDF() {
  let content = document.getElementById("toprint").outerHTML;
  /******************** */
  let yourDOCTYPE = "<!DOCTYPE html...";
  let printPreview = window.open("", "print_preview");
  let printDocument = printPreview.document;
  printDocument.open();
  let head =
    "<head>" +
    "<title>" +
    this.title +
    "</title>" +
    +
    "</head>";

  printDocument.write(
    yourDOCTYPE +
    "<html>" +
    head +
    "<body>"
    content +
    "</body>" +
    "</html>"
  );
  printPreview.print();
  printPreview.close();
}

【讨论】：

现在我在下载的 PDF 中得到了这个：<div id="toprint" class="invoice p-3 mb-3"><div class="row"><div class="col-3"><span class="brand-text font-weight-light"><img src="/img/globe.png" alt="Invoice Logo"></span> <br> lightgray;"><div </a> <a href="" class="btn btn-primary float-right" style="margin-right: 5px;"><i class="fa fa-download"></i> Generate PDF </a></div></div></div>
在你的情况下，我认为你应该在浏览器中使用内置的打印功能
喜欢打印发票并从那里下载 PDF 吗？
在content 上出现错误：312 | head + 313 | "<body>" > 314| content + | ^ 315 | "</body>" + 316 | "</html>" 317 | );

【解决方案3】：

编辑：当我最初回答这个问题时，OP 想使用 jsPDF。

见How to properly use jsPDF library

对于 vue，您可能希望为每个组件元素生成某种独特的 id，这样您就不会每次都抓取第一个元素。

var pdf = new jsPDF('p', 'pt', 'letter');
var ele = document.getElementsByClassName("invoice")[0];
// var ele = document.getElementById("mydiv");
var margins = {
  top: 80,
  bottom: 60,
  left: 40,
  width: 522
};
var cb = function (dispose) {
  pdf.save('Test.pdf');
}
var opt =  { 'width': margins.width };
pdf.fromHTML(ele,margins.left, margins.top, opt, cb, margins)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<div id="mydiv" class="invoice"><b> Test </b></div>

【讨论】：

收到此错误，当我点击下载按钮时。 Cannot read property '0' of null
等待我更新我的问题。

【解决方案4】：

var element = document.getElementById('target-div');
            var opt = {
                margin:0,
                filename: 'myfile.pdf',
                image: {type: 'jpeg',quality: 0.98},
                html2canvas: {scale: 2},
                jsPDF: {
                    unit: 'mm',
                    orientation: 'portrait'
                }
            };

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

【讨论】：