jsPDF создает PDF с растянутыми элементами внутри - PullRequest
Новая
       27

jsPDF создает PDF с растянутыми элементами внутри

3 голосов
/ 03 апреля 2019

Я пытаюсь использовать Html2Canvas вместе с jsPDF для создания PDF-файла из HTML.Чтобы архивировать, что я следую этому быстрому учебнику .

Я пытаюсь сделать простой Hello World h1, и на самом деле я получаю PDF и Hello World, но это растянуть,Я не знаю, как изменить его для правильного отображения, вы можете увидеть изображение ниже:

enter image description here

Я уже пытался изменить конфигурациюОбъект PDF выглядит примерно так: pdf.internal.scaleFactor = 2.25;

Но, похоже, это ничего не меняет, я также безуспешно пытался изменить конфигурацию. 

<template>
  <div>
    <a @click="print">Print</a>
    <div id="nodeToRenderAsPDF">
      <h1>Hello World</h1>
    </div>
  </div>
</template>

<script>
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    print() {
      const filename  = 'ThisIsYourPDFFilename.pdf';

      html2canvas(document.querySelector('#nodeToRenderAsPDF')).then(canvas => {
        let pdf = new jsPDF('p', 'mm', 'a4');
        pdf.internal.scaleFactor = 2.25;
        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
        pdf.save(filename);
      });
    }
  }
}
</script>

Фактический результат, который я получаю, таков:растянутый элемент внутри pdf. Ожидается, что я получу PDF-файл, отображающий привет-мир того же размера, что и h1, отображаемый в браузере.

1 Ответ

1 голос
/ 03 апреля 2019

У меня также были похожие проблемы с jspdf.Затем я перешел в библиотеку pdfmake.Вы можете попробовать это, это потрясающая библиотека.

...