我试图将XML数据从网页转换为PDF文件,我希望我可以完全在JavaScript中做到这一点。我需要能够绘制文本,图像和简单的形状。我希望能够完全在浏览器中完成这些工作。
当前回答
另一个值得一提的javascript库是pdfmake。
pdfmake操场 github上的Pdfmake
浏览器的支持似乎没有jsPDF强大,也没有形状选项,但是格式化文本的选项比目前jsPDF中可用的选项更高级。
其他回答
我维护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。
另一个值得一提的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 " > < /脚本>
即使可以用JavaScript在内存中生成PDF,仍然会遇到如何将数据传输给用户的问题。JavaScript很难直接向用户推送文件。
为了将文件传递给用户,您需要执行一个服务器提交,以便让浏览器弹出保存对话框。
话虽如此,生成pdf文件真的不是太难。阅读说明书就可以了。
推荐文章
- 在React Native中使用Fetch授权头
- 为什么我的球(物体)没有缩小/消失?
- 如何使用jQuery检测页面的滚动位置
- if(key in object)或者if(object. hasownproperty (key)
- 一元加/数字(x)和parseFloat(x)之间的区别是什么?
- angularjs中的compile函数和link函数有什么区别
- 删除绑定中添加的事件监听器
- 很好的初学者教程socket.io?
- HtmlSpecialChars在JavaScript中等价于什么?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法