我试图将XML数据从网页转换为PDF文件,我希望我可以完全在JavaScript中做到这一点。我需要能够绘制文本,图像和简单的形状。我希望能够完全在浏览器中完成这些工作。
当前回答
另一个有趣的项目是texlive.js。
它允许您在浏览器中编译(La)TeX到PDF。
其他回答
我维护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。
值得一提的是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库是pdfmake。
pdfmake操场 github上的Pdfmake
浏览器的支持似乎没有jsPDF强大,也没有形状选项,但是格式化文本的选项比目前jsPDF中可用的选项更高级。
对于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文档。里面有两个不同的块,每个块都呈现不同的文本。这些并不是唯一可以使用的有效原语。您可以参考组件或示例部分了解更多信息。
我刚刚写了一个叫做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 " > < /脚本>
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 如何以编程方式触发引导模式?
- setTimeout带引号和不带括号的区别
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 用javascript检查输入字符串中是否包含数字
- 如何使用JavaScript分割逗号分隔字符串?
- 在Javascript中~~(“双波浪号”)做什么?
- 谷歌chrome扩展::console.log()从后台页面?
- 未捕获的SyntaxError:
- [].slice的解释。调用javascript?
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- 数组的indexOf函数和findIndex函数的区别
- jQuery添加必要的输入字段
- Access-Control-Allow-Origin不允许Origin < Origin >