jspdf 및 Vue.js를 사용하여 pdf 생성

jspdf 및 Vue.js를 사용하여 pdf 생성

Vue.js는 처음이라서 PDF를 생성하려고 하는데 방법을 모르겠어요.

여기 있습니다.

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


  methods: {
    pdf () {
      const doc = new jsPDF()
    }
  }

}

오류:

속성 또는 메서드 "pdf"가 인스턴스에서 정의되지 않았지만 렌더링 중에 참조됩니다.

먼저 다음과 같이 PDF 라이브러리를 Import합니다.

import jsPDF from 'jspdf'

그런 다음 개체를 인스턴스화하고 내용을 제공합니다.

methods: {
  createPDF () {
    let pdfName = 'test'; 
    var doc = new jsPDF();
    doc.text("Hello World", 10, 10);
    doc.save(pdfName + '.pdf');
  }
}

상세한 것에 대하여는, 반드시 메뉴얼을 참조해 주세요.

html 페이지 콘텐츠를 다운로드하면 다음과 같이 할 수 있습니다.

1. 내용을 PDF로 다운로드할 요소에 대한 참조를 지정합니다.

   <div ref="content">
      ....
      ..
   </div>
   

2. 다음과 같은 버튼 다운로드 만들기

   <button @click="download">Download PDF</button>
   

3. vue-component에 jsPDF 라이브러리를 추가 및 Import하십시오.

   import jsPDF from 'jspdf' 
   import html2canvas from "html2canvas"
   

4. 다음과 같이 VUE 컴포넌트에 메서드를 지정합니다.

   methods: {
    download() {
     const doc = new jsPDF();
     const contentHtml = this.$refs.content.innerHTML;
     doc.fromHTML(contentHtml, 15, 15, {
       width: 170
     });
     doc.save("sample.pdf");
    },
   
    downloadWithCSS() {
      const doc = new jsPDF();
      /** WITH CSS */
      var canvasElement = document.createElement('canvas');
       html2canvas(this.$refs.content, { canvas: canvasElement 
         }).then(function (canvas) {
       const img = canvas.toDataURL("image/jpeg", 0.8);
       doc.addImage(img,'JPEG',20,20);
       doc.save("sample.pdf");
      });
    },
   }
   

   데모 @Download PDF via VUEJS를 참조하십시오.

html 페이지 콘텐츠를 다운로드하면 다음과 같이 할 수 있습니다.

Specify the ref to the element, whose content you want to download as pdf

<div ref="content">
   ....
   ..
</div>

다음과 같은 버튼 다운로드 만들기

<button @click="downloadWithCSS">Download PDF</button>

vue-component에 jsPDF 라이브러리를 추가 및 Import하십시오.

import jsPDF from 'jspdf' 
import domtoimage from "dom-to-image";


Specify the method into the VUE component like

methods: {
 downloadWithCSS() {

   /** WITH CSS */
    domtoimage
    .toPng(this.$refs.content)
    .then(function(dataUrl) {
      var img = new Image();
      img.src = dataUrl;
      const doc = new jsPDF({
        orientation: "portrait",
        // unit: "pt",
        format: [900, 1400]
      });
      doc.addImage(img, "JPEG", 20, 20);
      const date = new Date();
      const filename =
        "timechart_" +
        date.getFullYear() +
        ("0" + (date.getMonth() + 1)).slice(-2) +
        ("0" + date.getDate()).slice(-2) +
        ("0" + date.getHours()).slice(-2) +
        ("0" + date.getMinutes()).slice(-2) +
        ("0" + date.getSeconds()).slice(-2) +
        ".pdf";
      doc.save(filename);
    })
    .catch(function(error) {
      console.error("oops, something went wrong!", error);
    });
 },
}

언급URL : https://stackoverflow.com/questions/47668546/generate-pdf-with-jspdf-and-vue-js