使用JavaScript生成PDF文件

Question

我正在尝试将XML数据从网页转换为PDF文件,我希望我能在JavaScript中完全实现这一点.我需要能够绘制文本,图像和简单的形状.我希望能够在浏览器中完全做到这一点.

Answer 1

我刚刚编写了一个名为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>

Answer 2

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

• pdfmake游乐场
• pdfmake在github上

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

Answer 3

我维护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.

Answer 4

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

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

Answer 5

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