pdfmake.js使用及其源码分析
公司项目在需要将页面的文本导出成DPF,和支持打印时,一直没有做过这样的功能,花了一点时间将其做了出来,并且本着开源的思想和技术分享的目的,将自己的编码经验分享给大家,希望对大家有用。
现在是有一个文本在我的div的代码块中。
1 <h3 id="tatemplatecode"> </h3>
3 <div class="publishinfo">
4 <span id="publisher"></span><span id="publishtime"></span>
5 </div>
6 <div id="templatecontent">
7 </div>
我需要将id为tatemplatecode的东西和id为publisher和id=templatecontent的内容获得并导出pdf中。所有了所有的js插件,我选择使用了pdfmake.js。具体他的优先我就不说了,大家可以去看他的github地址,查看他的源码和简介。github
这里我是将自己的开发经验结合源码分析写下来。
导出pdf的解决代码:
$("#export").click(function(){
var tatemplatecode = $("#tatemplatecode").html();
var publishtime = $("#publishtime").html();
var templatecontent =$("#templatecontent").html().replace(/ /g," ").replace(/<p>/g,"").replace(/<\/p>/g,"").split("<br>");
var dd = {
content: [
tatemplatecode,
publishtime,
templatecontent
],
defaultStyle: {
font: '微软雅黑'
}
};
pdfMake.createPdf(dd).download("三方协议");
});
这里我们只使用了build中的pdfmake.js和vfs_fronts.js,pdfmake.js是我们的主要js插件,vfs_fronts.js里面使我们需要支持的字体,如果你需要支持什么字体比如‘微软雅黑’,就从网上下一个,打包到vfs_fronts.js中。
支持打印的解决代码:
$("#print").click(function(){
debugger;
var tatemplatecode = $("#tatemplatecode").html();
var publishtime = $("#publishtime").html();
var templatecontent =$("#templatecontent").html().replace(/ /g," ").replace(/<p>/g,"").replace(/<\/p>/g,"").split("<br>");
var dd = {
content: [
tatemplatecode,
publishtime,
templatecontent
],
defaultStyle: {
font: '微软雅黑'
}
};
pdfMake.createPdf(dd).print();
});
我们现在已经解决掉导出和打印的功能,但是为了我们进一步了解pdfmake,我们就这二个功能简单分析一下源码。
pdfmake的createPdf函数
module.exports = {
createPdf: function (docDefinition) {
if (!canCreatePdf()) {
throw 'Your browser does not provide the level of support needed';
}
return new Document(docDefinition, global.pdfMake.tableLayouts, global.pdfMake.fonts, global.pdfMake.vfs);
}
};
查看pdfmake.js的download函数。
Document.prototype.download = function (defaultFileName, cb, options) {
if (typeof defaultFileName === 'function') {
cb = defaultFileName;
defaultFileName = null;
} defaultFileName = defaultFileName || 'file.pdf';
this.getBlob(function (result) {
saveAs(result, defaultFileName); if (typeof cb === 'function') {
cb();
}
}, options);
};
Document是pdfmake.js的函数。现在就是通过prototype给document的原型加上一个属性函数,定义一个download的函数。因为js是弱关系语言所有你发现这个函数有三个参数但是你却可以无餐直接使用它。因为他不知道你是如何调用他的所以的函数非常巧妙,值得我们学习。
typeof 来检测defaultFileName参数的形式,因为根据顺序来指定参数第一个应该是默认文件名称,第二个成功返回时触发的函数,第三个是设置导出pdf的设置属性。前面几行都是在判断和设置参数,下面就开始真正运行函数。
Document.prototype.getBlob = function (cb, options) {
if (!cb) {
throw 'getBlob is an async method and needs a callback argument';
}
var that = this;
this.getBuffer(function (result) {
var blob = that._bufferToBlob(result);
cb(blob);
}, options);
};
这是讲dd的内容根据原函数的设置变成blob,saveAs讲blob变成filename的pdf。
惊喜红包等你拿
最新文章
- jQuery-easyui实现关闭全部tabs
- Lucene中几种常用的Query
- java 字符串转成 json 数组并且遍历
- 【转】浅谈html5网页内嵌视频
- Hibernate原生SQL查询
- 初学者对WAMP服务器的设置
- HBase使用场景和成功案例
- 初步掌握MapReduce的架构及原理
- git 使用过程(二、创建版本库)
- C语言中关于scanf函数的用法
- jvm实战-基本类型占多少内存
- [笔记]GBDT理论知识总结
- ES-6常用语法和Vue初识
- nodejs----微信注册测试号获取token
- C#算法
- zprofiler三板斧解决cpu占用率过高问题(转载)
- echarts网络拓扑图
- Ajax取PHP JSON数据并显示
- python自学第12天 模块
- 深度优先搜索之小z的房子与验证码识别