使用JavaScript生成PDF文件

qvsjd97n  于 2023-01-01  发布在  Java
关注(0)|答案(8)|浏览(205)

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

zbdgwd5y

zbdgwd5y1#

我刚刚写了一个叫做jsPDF的库,它可以单独使用Javascript生成PDF文件。它还很年轻,我很快就会添加一些特性和bug修复。我还得到了一些在不支持数据URI的浏览器中的解决方案。它是在一个自由的MIT许可证下授权的。
在我开始写之前,我遇到了这个问题,我想我会回来让你知道:)
Generate PDFs in Javascript
示例创建"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>
92dk7w1h

92dk7w1h2#

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

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

yrwegjxp

yrwegjxp3#

我维护PDFKit,它也支持pdfmake(这里已经提到过),它可以在Node和浏览器中工作,并且支持其他库所不支持的一系列功能:

  • 嵌入子集化字体,支持unicode。
  • 许多高级的文本布局工具(分栏、分页、完全unicode换行、基本的富文本等)。
  • 为高级排版设计更多字体(OpenType/AAT连字、上下文替换等)。即将推出:如果你感兴趣的话可以去看看fontkit分支。
  • 更多图形内容:梯度等。
  • 使用现代工具如browserify和streams构建,在浏览器和节点中都可用。

查看http://pdfkit.org/以获得完整的教程,亲自了解PDFKit可以做什么。作为可以生成哪些类型文档的示例,使用PDFKit本身从一些Markdown文件中查看PDF generated文档:http://pdfkit.org/docs/guide.pdf.
您也可以在浏览器中以交互方式试用它:http://pdfkit.org/demo/browser.html.

k4aesqcs

k4aesqcs4#

另一个有趣的项目是texlive.js
它允许您在浏览器中将(La)TeX编译为PDF。

oewdyzsn

oewdyzsn5#

对于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文档,只有一页。里面有两个不同的块,每个块呈现不同的文本。这些不是你可以使用的唯一有效的原语。你可以参考ComponentsExamples部分以获得更多信息。

koaltpgm

koaltpgm6#

值得一提的是PDF-LIB,这是一个令人敬畏的库:

  • 支持纯JavaScript
  • 可以编辑现有的PDF模板甚至使用纯JavaScript。(非常无用。许多JavaScript库不能做到这一点)
  • 它生成一个PDF格式的可选择/可复制/可高亮显示文本,而不是像许多其他库生成的PDF格式内的图像文件。
  • 更容易使用。(我喜欢它)x1c 0d1x
  • 如果您有兴趣将其与pure JavaScriptthis may help一起使用。
  • 如果您有兴趣对目前最流行的JavaScript库做同样的事情,请使用JSPDFthis may help。(简单地说,JSPDF无法完成我们想要的节省时间的事情,编辑现有模板。)

看看代码有多漂亮

<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>
l7mqbcuq

l7mqbcuq7#

最新消息:免费服务不再提供。但是如果你在紧要关头需要一些东西,你可以使用一种价格合理的服务,而且它应该是可靠的。
https://pdfmyurl.com/plans
您可以通过添加从任何url创建pdf的链接(例如http://www.phys.org)来使用此免费服务:
http://freehtmltopdf.com/?convert=http%3A%2F%2Fwww.phys.org&size=US_Letter&orientation=portrait&framesize=800&language=en

mbskvtky

mbskvtky8#

即使你可以用JavaScript在内存中生成PDF,你仍然会遇到如何将数据传输给用户的问题,JavaScript很难直接将文件推给用户。
要将文件发送给用户,您可能需要执行服务器提交,以便让浏览器打开保存对话框。
话虽如此,生成PDF文件并不太难,只要阅读一下规范就行了。

相关问题