值得一提的是PDF-LIB，这是一个很棒的库:

Supports pure JavaScript. Can edit existing PDF templates even with pure JavaScript. (Most impotently. Many JavaScript libraries can't do it) It is generating a PDF with select-able/copy-able/highlight-able text not an image file inside an PDF like many other libraries generate. More easy to use. (I love it) If you are interested in using it with pure JavaScript this may help. If you are interested to do the same with the most popular JavaScript library as of now JSPDF this may help. (Simply JSPdf can't do most time saving thing we want, editing an existing template.)

看看代码有多漂亮

<script type="text/javascript"> async function downloadPdf() { const url = './print-templates/pquot-template.pdf'; const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer()); // Getting the document const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes); // Getting the first page const pages = pdfDoc.getPages(); const firstPage = pages[0]; // Customer name firstPage.drawText('Customer name is here with more text (GAR004) quick brown customerm jumps over lazy dog.', { x: 10.5*9, y: 76.6*9, size: 10, maxWidth: 28*9, // Wrap text with one line. WOW :O lineHeight: 1.5*9 }); // Currency short code firstPage.drawText('LKR', { x: 10.5*9, y: 73.5*9, size: 10 }); var itemName = 'Here is the item name with some really really long text and quick brown fox jumps over lazy dog. long text and quick brown fox jumps over lazy dog:)'; // Item name firstPage.drawText(itemName, { x: 5*9, y: 67*9, size: 10, maxWidth: 31*9, lineHeight: 2*9 }); const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true }); document.getElementById('pdf').src = pdfDataUri; } </script>

即使可以用JavaScript在内存中生成PDF，仍然会遇到如何将数据传输给用户的问题。JavaScript很难直接向用户推送文件。

为了将文件传递给用户，您需要执行一个服务器提交，以便让浏览器弹出保存对话框。

话虽如此，生成pdf文件真的不是太难。阅读说明书就可以了。

值得一提的是PDF-LIB，这是一个很棒的库:

Supports pure JavaScript. Can edit existing PDF templates even with pure JavaScript. (Most impotently. Many JavaScript libraries can't do it) It is generating a PDF with select-able/copy-able/highlight-able text not an image file inside an PDF like many other libraries generate. More easy to use. (I love it) If you are interested in using it with pure JavaScript this may help. If you are interested to do the same with the most popular JavaScript library as of now JSPDF this may help. (Simply JSPdf can't do most time saving thing we want, editing an existing template.)

看看代码有多漂亮

<script type="text/javascript"> async function downloadPdf() { const url = './print-templates/pquot-template.pdf'; const existingPdfBytes = await fetch(url).then(res => res.arrayBuffer()); // Getting the document const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes); // Getting the first page const pages = pdfDoc.getPages(); const firstPage = pages[0]; // Customer name firstPage.drawText('Customer name is here with more text (GAR004) quick brown customerm jumps over lazy dog.', { x: 10.5*9, y: 76.6*9, size: 10, maxWidth: 28*9, // Wrap text with one line. WOW :O lineHeight: 1.5*9 }); // Currency short code firstPage.drawText('LKR', { x: 10.5*9, y: 73.5*9, size: 10 }); var itemName = 'Here is the item name with some really really long text and quick brown fox jumps over lazy dog. long text and quick brown fox jumps over lazy dog:)'; // Item name firstPage.drawText(itemName, { x: 5*9, y: 67*9, size: 10, maxWidth: 31*9, lineHeight: 2*9 }); const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true }); document.getElementById('pdf').src = pdfDataUri; } </script>

另一个值得一提的javascript库是pdfmake。

pdfmake操场 github上的Pdfmake

浏览器的支持似乎没有jsPDF强大，也没有形状选项，但是格式化文本的选项比目前jsPDF中可用的选项更高级。

对于react爱好者来说，还有另一个很棒的PDF生成资源:react -PDF

它非常适合在React中创建PDF文件，甚至可以让用户从客户端本身下载，而不需要服务器!

这是一个React-PDF的小示例片段，用于创建2节PDF文件

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

这将生成一个只有一页的PDF文档。里面有两个不同的块，每个块都呈现不同的文本。这些并不是唯一可以使用的有效原语。您可以参考组件或示例部分了解更多信息。

我维护PDFKit，它也支持pdfmake(已经在这里提到过)。它可以在Node和浏览器中工作，并支持其他库不支持的一堆东西:

嵌入子字体，支持unicode。 大量的高级文本布局(列，换行，完整的unicode换行，基本的富文本等)。 为高级排版(OpenType/AAT结扎，上下文替换等)工作更多的字体内容。即将发布:如果您感兴趣，请参阅fontkit分支。 更多图像内容:渐变等。 使用browserify和streams等现代工具构建。在浏览器和节点中都可用。

查看http://pdfkit.org/的完整教程，自己看看PDFKit可以做什么。关于可以生成哪种文档的示例，请查看使用PDFKit本身从一些Markdown文件生成的PDF文档:http://pdfkit.org/docs/guide.pdf。

您也可以在浏览器中交互式地尝试:http://pdfkit.org/demo/browser.html。