标签: jspdf

我正在使用 jsPDF 从画布创建 PDF 文件。问题是，创建的文件太大。

我曾经将数据从画布获取到 PNG，然后将 PNG 数据粘贴到 PDF 中。如果我以这种方式创建文件，它有 4.0MB

我发现了关于这个问题的问题： How to reduce the file size created by JSPDF?

我根据那里的答案重写了我的代码。所以现在我使用 JPEG 而不是 PNG：

var imgData = canvas.toDataURL({
    format: 'jpeg',
    quality: 0.2
});

var doc = new jsPDF('p', 'mm', "A4");
doc.addImage(imgData, 'JPEG', 10, 10, 190, 190);
doc.save('mandala.pdf');

但是文件仍然有 4.0MB，我为“imgData”设置的质量无关紧要。

有没有办法减小尺寸？或者 4.0 MB 是我能得到的最小的？

当我使用 JSPDF 将 PNG 转换为 PDF 时，只要 PNG 是透明的，JSPDF 就会放入黑色背景。在库中哪里可以找到将其从黑色更改为白色的代码？

除了更新库之外，我愿意接受其他建议。

如何在页眉中创建边框？我正在使用 jspdf autotable 创建表格，但找不到将边框应用于标题的任何想法。是否有任何钩子可用于创建标题边框？

我有一个HTML页面，其中包含由chart.js生成的大约10个图表（所以这些是canvas元素）。我希望能够将页面内容导出为PDF文件。

我尝试使用jsPDF的.fromHTML函数，但是它似乎不支持导出画布内容。（或者是我做错了）。我只是做了类似的事情：

    $(".test").click(function() {
  var doc = new jsPDF()

  doc.fromHTML(document.getElementById("testExport"));
  doc.save('a4.pdf')
});

任何替代方法将不胜感激。

我正在使用 html2pdf

我可以生成发票的 PDF，但我不想<div class="div-dont-want-to-display">在我的 PDF 上显示，我该怎么做？

我的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: …

我必须将 pdf 的标题放在中间。我尝试了很多方法，但找不到可行的方法。

我正在使用 jspdf 和 jspdf-autotable 包通过reactjs 形成pdf。

var options = {
  didDrawPage: function (data) {
            // Header
            doc.text(heading, 20, 10,{
                    halign: 'center',
                    valign: 'middle'
                });
        }
};
doc.autoTable(columns, rows, options);
doc.save('table.pdf');

上面的代码对我不起作用。

我正在尝试使用 html2canvas 生成 PDF，但是在调用该函数时抛出错误，我的 TS 如下：

  @ViewChild('content') content:ElementRef;

  generarPDF() {
    html2canvas(document.getElementById('content'), {
      // Opciones
      allowTaint: true,
      useCORS: false,
      // Calidad del PDF
      scale: 1
    }).then(function(canvas) {
      var img = canvas.toDataURL("image/png");
      var doc = new jsPDF();
      doc.addImage(img,'PNG',7, 20, 195, 105);
      doc.save('postres.pdf');
    });
  }

我的html是：

  @ViewChild('content') content:ElementRef;

  generarPDF() {
    html2canvas(document.getElementById('content'), {
      // Opciones
      allowTaint: true,
      useCORS: false,
      // Calidad del PDF
      scale: 1
    }).then(function(canvas) {
      var img = canvas.toDataURL("image/png");
      var doc = new jsPDF();
      doc.addImage(img,'PNG',7, 20, 195, 105);
      doc.save('postres.pdf');
    });
  }

div.cliente …

我正在将 jsPDF 与 autotable 一起使用，我试图在生成的 pdf 页面上将表格以固定宽度居中。我似乎找不到解决方案，我看到的所有地方都是全宽，我不希望我的表格是全宽。我尝试使用边距选项，但它不是很精确，而且我不完全确定如何计算 A4 的边距以使表格水平居中。

截屏：

document.querySelector(".report-btn").addEventListener("click", () => {
  const pdfDoc = new jsPDF();
  const list = createListforPdf(); // function to generate list

  pdfDoc.autoTable({
    theme: "grid",
    tableWidth: 100,
    styles: { halign: "center" },
    columnStyles: {
      0: { cellWidth: 85, halign: "left" },
      1: { cellWidth: 15 }
    },

    head: [["MRZ Check number", "is OK?"]],
    body: [[list[0], "YES"], [list[1], "NO"]]
  });

  pdfDoc.save();
});

我使用的是最新版本的jdPDF（2.3.0）。在文档中，它说要使文本居中，请使用align：'center'选项在第四个参数中传递一个对象，但这不起作用。我也不明白为什么如果我希望文本居中，我应该指定 X。

这是我的代码：

const pdf = new window.jspdf.jsPDF();
pdf.text(`Hello world`, null, 20, { align: 'center'} );
pdf.save("TEST");

jsPDF 文本文档：http://raw.githack.com/MrRio/jsPDF/master/docs/jsPDF.html#text

我正在使用 CDN 链接中的 jsPDF。

我正在尝试在下载 PDF 时在所有屏幕中添加页眉和页脚。我使用 jspdf-autotable 添加了带有模拟数据的表，并且能够下载它。但标题仅出现在下载的 PDF 的最后一页中

我需要一些帮助来获取所有屏幕中带有页码的页眉和页脚。请帮忙。

沙箱中的代码：https://codesandbox.io/s/upbeat-cannon-cfiry? file=/src/App.js:0-1257

代码在这里：

import jsPDF from "jspdf";
import "jspdf-autotable";
import { datas } from "./data";
import { renderToString } from "react-dom/server";
import PdfDocument from "./PdfDocument";
export default function App() {
  const columns = [
    { title: "Rank", dataKey: "Rank" },
    { title: "Name", dataKey: "Name" },
    { title: "count", dataKey: "count" }
  ];

  var rows = datas?.map((data) => ({
    Rank: data?.Rank,
    Name: data?.Name,
    count: data?.count
  }));

  const downloadPdf = () => …