299

我正在尝试将 XML 数据从网页转换为 PDF 文件，我希望我可以完全在 JavaScript 中完成此操作。我需要能够绘制文本、图像和简单的形状。我希望能够完全在浏览器中完成此操作。

4

7 回答 7

510

我刚刚编写了一个名为jsPDF的库，它仅使用 Javascript 生成 PDF。它还很年轻，我很快就会添加功能和错误修复。在不支持数据 URI 的浏览器中也有一些解决方法的想法。它是在自由的 MIT 许可下获得许可的。

在我开始写它之前我遇到了这个问题，并认为我会回来让你知道:)

用 Javascript 生成 PDF

示例创建一个“Hello World”PDF 文件。

// Default export is a4 paper, portrait, using milimeters for units
var doc = new jsPDF()

doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

于 2009-04-22T19:49:46.127 回答
155

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

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

于 2014-05-07T12:13:18.510 回答
69

我维护PDFKit，它也为 pdfmake 提供支持（这里已经提到过）。它适用于 Node 和浏览器，并支持其他库不支持的一堆东西：

  • 嵌入子集字体，支持 unicode。
  • 许多高级文本布局的东西（列、分页、完整的 unicode 换行、基本的富文本等）。
  • 为高级排版（OpenType/AAT 连字、上下文替换等）处理更多字体。即将推出：如果您有兴趣，请查看 fontkit 分支。
  • 更多图形内容：渐变等。
  • 使用诸如 browserify 和流之类的现代工具构建。可在浏览器和节点中使用。

查看http://pdfkit.org/获取完整教程，亲自了解 PDFKit 可以做什么。有关可以生成哪些类型的文档的示例，请查看使用 PDFKit 本身从一些 Markdown 文件生成的 PDF 文档： http ://pdfkit.org/docs/guide.pdf 。

您也可以在浏览器中以交互方式试用它：http: //pdfkit.org/demo/browser.html。

于 2015-02-05T03:35:12.410 回答
12

另一个有趣的项目是texlive.js。

它允许您在浏览器中将 (La)TeX 编译为 PDF。

于 2016-05-30T13:39:01.263 回答
3

对于 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 文档。在里面，有两个不同的块，每个块都呈现不同的文本。这些不是您可以使用的唯一有效原语。您可以参考组件或示例部分了解更多信息。

于 2021-10-25T04:55:39.437 回答
-40

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

要将文件获取给用户，您需要进行服务器提交以使浏览器显示保存对话框。

话虽如此，生成PDF确实并不难。只需阅读规范。

于 2009-04-12T23:21:16.847 回答