html2pdf: как скрыть <div>из PDF? - PullRequest
Новая
       4

html2pdf: как скрыть <div>из PDF?

0 голосов
/ 28 ноября 2018

============================= ВОПРОС ОБНОВЛЕНО =============================

Я использую html2pdf

Я могу создать PDF своего счета, но я нене хочу, чтобы <div class="div-dont-want-to-display"> отображалось в моем PDF, как я могу это сделать?

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

Ответы [ 3 ]

0 голосов
/ 28 ноября 2018

Редактировать: Когда я первоначально ответил на этот вопрос, OP хотел использовать jsPDF.

См. Как правильно использовать библиотеку jsPDF

Для 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>
0 голосов
/ 28 ноября 2018

Вы можете использовать библиотеку html2pdf , которая использует jsPDF и html2canvas.

Библиотека создает PDF-файл из изображения div, которое вы передаете в качестве аргумента.

Код для вызова библиотеки после импорта выглядит следующим образом: 

var element = document.getElementById('content');
html2pdf(element);
<div id="content">
  Test
</div>

Вы также можете передать некоторые параметры, более подробную информацию о github библиотеки.

Вы можете скрыть некоторые элементы, используя следующий тег:

<div id="element-to-hide" data-html2canvas-ignore="true"></div>
0 голосов
/ 28 ноября 2018

Вам нужно добавить 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();
}
...