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


当前回答

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

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

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

其他回答

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

pdfmake操场 github上的Pdfmake

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

值得一提的是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文件真的不是太难。阅读说明书就可以了。

我刚刚写了一个叫做jsPDF的库,它只使用Javascript生成pdf。它还很年轻,我很快就会添加新功能并修复bug。还得到了一些在不支持数据uri的浏览器中解决问题的想法。它是麻省理工学院许可的。

在我开始写这个问题之前,我遇到了这个问题,我想我应该回来让你知道:)

用Javascript生成pdf文件

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

//默认导出为a4纸,纵向,以毫米为单位 var doc = new jsPDF() 医生。文本(“Hello world !”', 10,10) doc.save(“a4.pdf”) < script src = " https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js " > < /脚本>

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