我正在尝试将 XML 数据从网页转换为 PDF 文件，我希望我可以完全在 JavaScript 中完成此操作。我需要能够绘制文本、图像和简单的形状。我希望能够完全在浏览器中执行此操作。
使用 JavaScript 生成 PDF 文件
IT技术
javascript
pdf
pdf-generation
2021-01-23 22:27:54
6个回答
我刚刚编写了一个名为jsPDF的库，它可以单独使用 Javascript 生成 PDF。它仍然很年轻，我将很快添加功能和错误修复。还对不支持数据 URI 的浏览器中的变通方法有了一些想法。它是在自由的 MIT 许可下获得许可的。
我在开始写之前遇到了这个问题，并认为我会回来告诉你:)
示例创建一个“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>另一个值得一提的 javascript 库是pdfmake。
浏览器支持似乎不如 jsPDF 强大，也似乎没有形状选项，但是格式化文本的选项比 jsPDF 中当前可用的选项更高级。
我维护PDFKit，它也支持 pdfmake （已经在这里提到）。它适用于 Node 和浏览器，并支持许多其他库不支持的东西：
- 嵌入子集字体，支持 unicode。
- 许多高级文本布局内容（列、分页、完整的 unicode 换行、基本的富文本等）。
- 为高级排版（OpenType/AAT 连字、上下文替换等）处理更多字体内容。即将推出：如果您有兴趣，请查看 fontkit 分支。
- 更多图形内容：渐变等。
- 使用浏览器和流等现代工具构建。可在浏览器和节点中使用。
查看http://pdfkit.org/的完整教程，亲自了解 PDFKit 可以做什么。有关可以生成哪些类型的文档的示例，请查看使用 PDFKit 本身从某些 Markdown 文件生成的 PDF 文档：http ://pdfkit.org/docs/guide.pdf 。
您也可以在此处的浏览器中以交互方式进行尝试：http : //pdfkit.org/demo/browser.html。
另一个有趣的项目是texlive.js。
它允许您在浏览器中将 (La)TeX 编译为 PDF。
对于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 文档。在里面，两个不同的块，每个块都呈现不同的文本。这些不是您可以使用的唯一有效原语。您可以参考组件或示例部分了解更多信息。