Подтвердить что ты не робот

Сгенерировать PDF с помощью jspdf и Vue.js

Я новичок в Vue.js, и я пытаюсь создать PDF файл, но я не знаю, как это сделать.

Это то, что у меня есть:

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


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

}

Ошибка:

Свойство или метод "pdf" не определены на экземпляре, но указаны во время рендеринга

Ответ 1

Сначала импортируйте библиотеку PDF как:

import jsPDF from 'jspdf'

Затем просто создайте экземпляр объекта и дайте ему содержимое:

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

Обязательно прочитайте документацию для получения дополнительной информации.

Ответ 2

Скачать HTML-страницы, можно подписаться как:

Укажите ссылку на элемент, содержимое которого вы хотите загрузить, в формате pdf
```
<div ref="content">
   ....
   ..
</div>
```
Создайте кнопку загрузки, например
```
<button @click="download">Download PDF</button>
```
Обязательно добавьте & импортировать библиотеку jsPDF в vue-компонент
```
import jsPDF from 'jspdf' 
```

Укажите метод в компоненте 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");
   });
 },
}

Посмотрите демоверсию @Загрузите PDF через VUEJS.