js怎么生成pdf文件

在JavaScript中生成PDF文件的方法主要有以下几种：使用jsPDF库、使用PDFMake库、使用HTML2Canvas库。这些库各有优点和适用场景。以下是使用jsPDF库生成PDF文件的详细步骤。

一、使用jsPDF库生成PDF文件

1、引入jsPDF库

首先，你需要在项目中引入jsPDF库。你可以通过CDN方式引入，也可以通过npm安装。以下是通过CDN引入的方法：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

如果你使用npm管理项目，你可以通过以下命令安装jsPDF：

npm install jspdf

2、创建PDF文档

引入库后，你可以开始创建PDF文档。以下是一个简单的示例：

const { jsPDF } = window.jspdf;

const doc = new jsPDF();
// 设置字体
doc.setFont("helvetica");
doc.setFontSize(12);
// 添加文本
doc.text("Hello, world!", 10, 10);
// 保存PDF
doc.save("example.pdf");

在这个示例中，我们首先创建了一个新的jsPDF实例，然后设置了字体和字体大小，并在PDF文档中添加了一些文本，最后将PDF文档保存为“example.pdf”。

3、添加图像和其他元素

jsPDF不仅可以添加文本，还可以添加图像、形状和其他元素。以下是一个示例，展示了如何添加图像和形状：

const { jsPDF } = window.jspdf;

const doc = new jsPDF();
// 添加图像
const imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD...'; // 图像的base64编码
doc.addImage(imgData, 'JPEG', 10, 10, 50, 50);
// 添加矩形
doc.rect(20, 20, 10, 10);
// 添加圆
doc.circle(30, 30, 5);
// 保存PDF
doc.save("example_with_image_and_shapes.pdf");

在这个示例中，我们添加了一张图像、一个矩形和一个圆，展示了如何在PDF文档中添加不同的元素。

二、使用PDFMake库生成PDF文件

1、引入PDFMake库

你可以通过CDN方式引入PDFMake库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/pdfmake.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.70/vfs_fonts.js"></script>

或者通过npm安装：

npm install pdfmake

2、创建PDF文档

以下是使用PDFMake库生成PDF文档的示例：

const docDefinition = {

  content: [
    'This is a sample PDF generated using PDFMake.',
    {
      text: 'This is a header',
      style: 'header'
    },
    {
      text: 'This is a subheader',
      style: 'subheader'
    },
    'Here is some plain text.',
    {
      ul: [
        'Item 1',
        'Item 2',
        'Item 3'
      ]
    }
  ],
  styles: {
    header: {
      fontSize: 18,
      bold: true
    },
    subheader: {
      fontSize: 15,
      bold: true
    }
  }
};
pdfMake.createPdf(docDefinition).download('example.pdf');

在这个示例中，我们创建了一个包含标题、子标题、普通文本和列表的PDF文档，并将其下载为“example.pdf”。

3、添加图像和其他元素

PDFMake也支持添加图像和其他元素。以下是一个示例：

const docDefinition = {

  content: [
    'This is a sample PDF generated using PDFMake.',
    {
      text: 'This is a header',
      style: 'header'
    },
    {
      image: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD...', // 图像的base64编码
      width: 150
    },
    {
      text: 'This is a subheader',
      style: 'subheader'
    },
    {
      table: {
        body: [
          ['Column 1', 'Column 2', 'Column 3'],
          ['Data 1', 'Data 2', 'Data 3'],
          ['Data 4', 'Data 5', 'Data 6']
        ]
      }
    }
  ],
  styles: {
    header: {
      fontSize: 18,
      bold: true
    },
    subheader: {
      fontSize: 15,
      bold: true
    }
  }
};
pdfMake.createPdf(docDefinition).download('example_with_image_and_table.pdf');

在这个示例中，我们添加了一张图像和一个表格，展示了如何在PDF文档中添加不同的元素。

三、使用HTML2Canvas库生成PDF文件

1、引入HTML2Canvas和jsPDF库

你可以通过CDN方式引入HTML2Canvas和jsPDF库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

或者通过npm安装：

npm install html2canvas jspdf

2、创建PDF文档

以下是使用HTML2Canvas和jsPDF库生成PDF文档的示例：

const { jsPDF } = window.jspdf;

html2canvas(document.querySelector("#content")).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF();
  pdf.addImage(imgData, 'PNG', 10, 10);
  pdf.save("example_from_html.pdf");
});

在这个示例中，我们首先使用HTML2Canvas将一个HTML元素转换为画布，然后将画布转换为图像，并使用jsPDF将图像添加到PDF文档中。

3、处理多页PDF

如果内容较多，需要生成多页PDF，以下是一个示例：

const { jsPDF } = window.jspdf;

html2canvas(document.querySelector("#content")).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'pt', 'a4');
  const imgProps= pdf.getImageProperties(imgData);
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
  let heightLeft = pdfHeight;
  let position = 0;
  pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
  heightLeft -= pdf.internal.pageSize.getHeight();
  while (heightLeft >= 0) {
    position = heightLeft - pdfHeight;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight);
    heightLeft -= pdf.internal.pageSize.getHeight();
  }
  pdf.save("example_from_html_multi_page.pdf");
});

在这个示例中，我们处理了内容较多的情况，生成了多页PDF。

通过以上方法，你可以在JavaScript中生成PDF文件，并根据不同的需求选择合适的库。使用这些库，你可以轻松地创建包含文本、图像、形状和其他元素的PDF文档，并将其保存或下载。

相关问答FAQs：

1. 如何使用JavaScript生成PDF文件？

您可以使用JavaScript库（如jsPDF、PDFMake等）来生成PDF文件。这些库提供了各种方法和函数，使您能够创建文档并将其转换为PDF格式。您可以使用这些库创建文本、图像、表格和其他元素，并设置字体、颜色和布局等属性。

2. 我可以将HTML内容转换为PDF文件吗？

是的，您可以使用JavaScript将HTML内容转换为PDF文件。有一些库（如html2pdf、jsPDF-AutoTable等）可以帮助您实现这一功能。您只需将HTML内容传递给相应的函数，库将会将其转换为PDF格式，并提供下载链接或保存到服务器。

3. 如何将生成的PDF文件下载到本地？

要将生成的PDF文件下载到本地，您可以使用JavaScript生成一个下载链接，并设置链接的href属性为生成的PDF文件的URL。然后，您可以使用HTML5的download属性来指定文件的名称。这样，当用户点击下载链接时，生成的PDF文件将被下载到他们的本地计算机上。例如：

var pdfBlob = generatePDF(); // 生成PDF文件的函数
var downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(pdfBlob);
downloadLink.download = 'myPDF.pdf';
downloadLink.click();

请注意，上述代码中的generatePDF()函数应该替换为您实际生成PDF文件的函数。