思享工具箱

用js生成PDF的方案

摘要：
那好，现在想直接在web前端就生成pdf怎么办，目前有以下几个解决方案1：JSPDF.js这个库支持不同类型的PDF文件格式，包括：文本，数字，图形，图片，同时你可以自由的编辑标题或者其它类型元素。还支持互动的内容制作，例如，你可以输入文字或者数字，然后jsPDF帮助生成最后的PDF内容。

在java里，我们常用Itext来生成pdf，在pdf文件里组合图片，文字，画表格，画线等操作，还会遇到中文支持的问题。

那好，现在想直接在web前端就生成pdf怎么办，目前有以下几个解决方案

1：JSPDF.js

这个库支持不同类型的PDF文件格式，包括：文本，数字，图形，图片，同时你可以自由的编辑标题或者其它类型元素。

还支持互动的内容制作，例如，你可以输入文字或者数字，然后jsPDF帮助生成最后的PDF内容。

缺点，不支持中文，不支持svg导入（解决方案：svg+html转换成canvas）

http://jspdf.com/

示例代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Downloadify</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css" media="screen">
body {background: #fff; 500px; margin: 20px auto;}
input, textarea, p { font-family: 宋体, 黑体; font-size: 12pt;}
input, textarea { border: solid 1px #aaa; padding: 4px; 98%;}
</style>
<script type="text/javascript" src="http://t.zoukankan.com/js/swfobject.js"></script>
<script type="text/javascript" src="http://t.zoukankan.com/js/downloadify.js"></script>
<script type="text/javascript" src="http://t.zoukankan.com/js/jspdf.js"></script>
<!-- <script type="text/javascript" src="http://t.zoukankan.com/js/downloadify.min.js"></script> -->
<script type="text/javascript">
window.load=function(){
Downloadify.create('downloadify',{
filename: function(){
return document.getElementById('filename').value;
},
data: function(){
var doc = new jsPDF();
doc.text(20, 20, document.getElementById('data').value);
doc.addPage();
doc.text(20, 20, document.getElementById('data').value);
return doc.output();
},
onComplete: function(){ alert('成功保存文件!'); },
onCancel: function(){ alert('您已经取消保存文件'); },
onError: function(){ alert('出现错误了'); },
swf: 'js/downloadify.swf',
downloadImage: 'js/download.png',
100,
height: 30,
transparent: true,
append: false
});
}
</script>
</head>
<body onload="load();">
<input type="text" name="filename" value="文件名.pdf" /><br />
<textarea cols="60" rows="10" name="data" id="data">it seem do not support to Chinese</textarea>
<p id="downloadify">You must have Flash 10 installed to download this file.</p>
</body>
</html>

2：pdfmake

pdfmake的基本使用方法

1.包含以下两个文件

1
2
<script src="build/pdfmake.min.js"></script>
<script src="build/vfs_fonts.js"></script>

2.在JS代码中声明一个Document-definition对象，这个是pdfmake自己的术语。简单点说，就是创建一个至少包含content属性的对象。然后就可以调用pdfMake的方法导出PDF，具体见如下代码：

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
//创建Document-definition对象
vardd = {
content: [
'One paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
};
//导出PDF
pdfMake.createPdf(dd).download();
</script>

pdfmake支持中文

三个步骤：

1.到pdfmake项目网站，把工程都下载下来，然后进入工程目录将字体文件（比如微软雅黑.ttf)放到examples/fonts目录下，然后使用grunt dump_dir生成新的vfs_fonts.js文件；

从上面描述可知该工程是通过grunt管理的，如果无相关知识，请上网先补习下。

grunt dump_dir命令会将fonts目录下所有文件都打包，因此无用文件请别放进去。

微软雅黑.ttf网上一搜一大把，WINDOWS电脑系统盘下存放字体的目录也找得到。

2.回到自己的例子代码中，JS代码中修改pdfMake的fonts对象，声明当前要用到字体：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
微软雅黑: {
normal: '微软雅黑.ttf',
bold: '微软雅黑.ttf',
italics: '微软雅黑.ttf',
bolditalics: '微软雅黑.ttf',
}
};

3.Document-definition对象中声明默认要使用的字体，具体来说：就是声明一个对象，除了content属性，还要有一个defaultStyle属性，该defaultStyle下面还有再有一个font属性：

1
2
3
4
5
6
7
8
9
vardd = {
content: [
'中英文测试',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
defaultStyle: {
font: '微软雅黑'
}
};

以下为根据如上步骤做的一个完整例子源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>my first export PDF</title>
<script src="build/pdfmake.min.js"></script>
<script src="build/vfs_fonts.js"></script>
<script>
functiondown() {
vardd = {
content: [
'中英文测试',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
defaultStyle: {
font: '微软雅黑'
}
};
pdfMake.fonts = {
Roboto: {
normal: 'Roboto-Regular.ttf',
bold: 'Roboto-Medium.ttf',
italics: 'Roboto-Italic.ttf',
bolditalics: 'Roboto-Italic.ttf'
},
微软雅黑: {
normal: '微软雅黑.ttf',
bold: '微软雅黑.ttf',
italics: '微软雅黑.ttf',
bolditalics: '微软雅黑.ttf',
}
};
pdfMake.createPdf(dd).download();
}
</script>
</head>
<body>
<button onclick="down()">下载</button>
</body>
</html>

插入图片

在插入图片方面，jsPDF要求先将图片转换成Data URL才行，而pdfmake允许直接指定路径，看起来是很方便，但这是有条件的，必须是以node.js作为服务器，或者将图片放到vfs_fonts.js中，所以总的来说，用处不大，还是一样得将图片转换成Data URL形式才行。

为解决此问题，我写了一个ImageDataURL的函数对象，可同时传入多个图片地址。在图片都加载完成后，ImageDataURL.oncomplete将被触发，在回调中通过this.imgdata取出各个图片的Data URL，根据pdfmake的要求组织下，就可正确生成pdf了。

ImageDataURL的原理是通过H5的canvas标签，将图片绘制在canvas上，然后通过canvas的toDataURL得到图像的Data URL。使用时请注意浏览器兼容性问题。

以下为将sampleImage.jpg, sampleage.jpg, sampleImage.jpg依次写入PDF的例子，测试时sampleage.jpg不存在，PDF直接忽略。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>my second export PDF</title>
<script src="build/pdfmake.min.js"></script>
<script src="build/vfs_fonts.js"></script>
<script>
functiondown() {
varx = newImageDataURL(["sampleImage.jpg", "samplage.jpg", "sampleImage.jpg"]);
x.oncomplete = function() {
varimgs = newArray();
console.log("complete");
for(key inthis.imgdata) {
if(this.imgdata[key] == this.emptyobj)//不存在的图片直接忽略
continue;
imgs.push({image:this.imgdata[key]});//pdfmake的图片格式{image:image dataurl}
}
vardd = {
content: [
'Title',
imgs,
],
};
pdfMake.createPdf(dd).download();
}
}
</script>
</head>
<body>
<button onclick="down()">下载</button>
<script>
functionImageDataURL(urls) {//urls必须是字符串或字符串数组
this.completenum = 0;
this.totalnum = 0;
this.imgdata = newArray();
this.emptyobj = newObject();
this.oncomplete = function(){};
this.getDataURL = function(url, index) {
varc = document.createElement("canvas");
varcxt = c.getContext("2d");
varimg = newImage();
vardataurl;
varp;
p = this;
img.src = url;
img.onload = function() {
vari;
varmaxwidth = 500;
varscale = 1.0;
if(img.width > maxwidth) {
scale = maxwidth / img.width;
c.width = maxwidth;
c.height = Math.floor(img.height * scale);
} else{
c.width= img.width;
c.height= img.height;
}
cxt.drawImage(img, 0, 0, c.width, c.height);
p.imgdata[index] = c.toDataURL('image/jpeg');
for(i = 0; i < p.totalnum; ++i) {
if(p.imgdata[i] == null)
break;
}
if(i == p.totalnum) {
p.oncomplete();
}
};
img.onerror = function() {
p.imgdata[index] = p.emptyobj;
for(i = 0; i < p.totalnum; ++i) {
if(p.imgdata[i] == null)
break;
}
if(i == p.totalnum) {
p.oncomplete();
}
};
}
if(urls instanceofArray) {
this.totalnum = urls.length;
this.imgdata = newArray(this.totalnum);
for(key inurls) {
this.getDataURL(urls[key], key);
}
} else{
this.imgdata = newArray(1);
this.totalnum = 1;
this.getDataURL(urls, 0);
}
}
</script>
</body>
</html>

标签：#js#js代码#html代码#data#var | 浏览：899 | 发布日期：

免责声明：文章转载自《用js生成PDF的方案》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Qt动态库静态库的创建、使用、多级库依赖、动态库改成静态库等详细说明教你如何找到Go内存泄露【精编实战】下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

HTML编码规范1.0

1. HTML语义化  2. 书写规范  3. 补充  4. 注释                                                                  1. HTML语义化  分 离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化...

数据输入——生成你需要的echart图(世界地图，气泡图)

上一篇文章介绍了：堆积柱状图、扇形图、嵌套环形图，现在来介绍一下：世界地图和气泡图 1.世界地图 http://echarts.baidu.com/examples/editor.html?c=map-world-dataRange 这个就不多做介绍了，大家看图就可以了，颜色越深表示value越大，白色表示data中没有这个国家。 2.气泡图 按照这张...

WKWebView和JS交互

 // 1.WKWebView的配置        WKUserContentController *userContentController = [[WKUserContentController alloc] init];        [userContentController addScriptMessageHandler:self name:...

Django之POST GET与前后端交互

Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1）提交表单数据 2）提交JSON数据 后端的数据接收与响应 1）接收GET请求数据 2）接收POST请求数据 3）响应请求 GET 请求过程 前端通过ajax发起GET请求,json格式数据 var data = { "name": "test",...

JavaScript学习总结（6）——js弹出框、对话框、提示框、弹窗总结

一、JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 ========================          //弹出对话框并输出一段提示信息       function ale() {           //弹出一个对话...

Web Worker javascript多线程编程（一）

什么是Web Worker？ web worker 是运行在后台的 JavaScript，不占用浏览器自身线程，独立于其他脚本，可以提高应用的总体性能，并且提升用户体验。 一般来说Javascript和UI页面会共用一个线程，在HTML页面中执行js脚本时，页面的状态是不可响应的，直到脚本已完成。而这段代码可以交给Web Worker在后台运行，那么页面在...

最新文章

随机推荐

思享工具箱导航