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

您需要向您的div中添加一个<div id="toprint" class="invoice" > ....，如下所示：

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

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

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

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

{{1}}

Answer 2

您可以使用使用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>

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

Answer 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();

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

4 个答案: