web-dev-qa-db-ja.com

jspdfおよびVue.jsでPDFを生成します

私はVue.jsを初めて使い、PDFを生成しようとしていますが、その方法がわかりません。

これは私が持っているものです：

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


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

}

エラー：

プロパティまたはメソッド「pdf」はインスタンスで定義されていませんが、レンダリング中に参照されます

javascriptpdfvuejs2jspdf
14
Carlos Uriel Santiago

最初にPDFライブラリを次のようにインポートします。

import jsPDF from 'jspdf'

次に、オブジェクトをインスタンス化し、コンテンツを指定します。

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

必ず documentation を読んでください

21
samayo

Htmlページコンテンツをダウンロードします。

  1. コンテンツをPDFとしてダウンロードする要素の参照を指定します

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

  2. 次のようなボタンダウンロードを作成する

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

  3. 必ずjsPDFライブラリーをvue-componentに追加してインポートしてください。

    import jsPDF from 'jspdf'

  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 。

10
techyaura