我试图将XML数据从网页转换为PDF文件,我希望我可以完全在JavaScript中做到这一点。我需要能够绘制文本,图像和简单的形状。我希望能够完全在浏览器中完成这些工作。
当前回答
即使可以用JavaScript在内存中生成PDF,仍然会遇到如何将数据传输给用户的问题。JavaScript很难直接向用户推送文件。
为了将文件传递给用户,您需要执行一个服务器提交,以便让浏览器弹出保存对话框。
话虽如此,生成pdf文件真的不是太难。阅读说明书就可以了。
其他回答
更新:免费服务不再可用。但是如果你在紧要关头需要一些东西,你可以使用价格合理的服务,而且它应该是可靠的。
https://pdfmyurl.com/plans
你可以通过添加一个链接来使用这个免费服务,它可以从任何url(例如http://www.phys.org):)创建pdf文件
http://freehtmltopdf.com/?convert=http%3A%2F%2Fwww.phys.org&size=US_Letter&orientation=portrait&framesize=800&language=en
我刚刚写了一个叫做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 " > < /脚本>
另一个有趣的项目是texlive.js。
它允许您在浏览器中编译(La)TeX到PDF。
即使可以用JavaScript在内存中生成PDF,仍然会遇到如何将数据传输给用户的问题。JavaScript很难直接向用户推送文件。
为了将文件传递给用户,您需要执行一个服务器提交,以便让浏览器弹出保存对话框。
话虽如此,生成pdf文件真的不是太难。阅读说明书就可以了。
值得一提的是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>
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 如何在Android中渲染PDF文件
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?
- 什么时候.then(success, fail)被认为是承诺的反模式?