前端生成pdf的ｊｓ库－pdfmake．ｊｓ的简单使用

　　公司之前是通过 Jaspersoft Studio软件，生成一个．ｊａｓｐｅｒ文件模板，通过模板中的ｓｑｌ语句，查询信息，生成ｐｄｆ传给前端显示或者下载。

　　但是觉得会占用带宽，浪费服务器资源，并且这件事前端ｊｓ也可以实现，在网上找到了国外某神人开发的ｐｄｆｍａｋｅ．ｊｓ这个库，觉得很棒，英文比较棒的同学可以前往官网自学：

　　ｐｄｆｍａｋｅ．ｊｓ官网：http://pdfmake.org/

　　这里只是做了个日常使用的例子：

<!DOCTYPE html>
<html>
<head>
<title></title>
<%--前端生成pdf的插件--%>
<script type="text/javascript" src="${localCtx}/resources/jquery/pdfmake.js"></script>
<%--配合pdfmake.js的字体库（只含有仿宋和黑体），如何更改vfs_fonts.js，参照官网--%>
<script type="text/javascript" src="${localCtx}/resources/jquery/vfs_fonts.js"></script>
</head><script type="text/javascript">
//打印的动态信息
var pdf_data = {xfjName: '李二麻不服火车站扣脚被罚200元',time:'2017年12月25日15时30分',address:'英国伦敦唐宁街10号',dcr:'斯密斯',dcr_dw:'山东路123号6单元2门洞602室',jlr:'汤姆',jlr_dw:'中南海1号',bdcr:'唐纳德·川普',content:'问：说的是大家按时打卡打卡.\n答：时代精神的房东房客第三方接口货到付款'
}
var dd = {pageSize:'A4',//纸张大小pageOrientation:'portrait',//排版,默认:'portrait'(竖版),'landscape'(横板)compress: true,//pdf压缩，默认:truepageMargins: [ 40, 60, 40, 60 ],//页边距(左、上、右、下)//pdf中内容的显示content: [{ text: pdf_data.xfjName + '信访事项复查（复核）调查（约谈）笔录', style: 'header' },{ text: '时间：' + pdf_data.time, style: 'content' },{ text: '调查地点：' + pdf_data.address, style: 'content' },{ text: '调查人：' + pdf_data.dcr + '&#12288;&#12288;工作单位：' + pdf_data.dcr_dw, style: 'content' },{ text: '记录人：' + pdf_data.jlr + '&#12288;&#12288;工作单位：' + pdf_data.jlr_dw, style: 'content' },{ text: '被调查人：' + pdf_data.bdcr, style: 'content' },{ text: pdf_data.content, style: 'content' }],//文字样式styles: {header: {fontSize: 20,//字体大小bold: true,//粗体(如果导入的字体库中没有相应文字的粗体，请不要加)alignment:'center'//居中对齐},content: {fontSize: 14,italics: true,//字体的一种(如果导入的字体库中没有相应的字体，请不要加)//alignment: 'right'//居右对齐}},defaultStyle: {font: 'fangsong'}
};
pdfMake.fonts = {fangsong: {normal: 'fangsong.ttf',bold: 'fangsong.ttf',italics: 'fangsong.ttf',bolditalics: 'fangsong.ttf'}
};
$(function(){   $("#btn_printtt").click(function(){//pdfMake.createPdf(dd).download("名字没想好哦");//下载//pdfMake.createPdf(dd).open();//打开 参数：window(本页打开)// pdfMake.createPdf(dd).getBase64().then(function(data) {//将pdf转成base64//      alert(data);// });pdfMake.createPdf(dd).getDataUrl().then(function(pdf_url){$("#modal_data_pdf").modal({backdrop:'static'});//打开模态框var targetElement = document.querySelector('#modal_data_body_pdf');var iframe = document.querySelector('#iframe_pdf');iframe.src = pdf_url;//给iframe设置src$(iframe).css({height:'500px', width:'100%'});});});
});
</script><body><!-- 查看pdf按钮--><button type="button" id="btn_printtt">查看ｐｄｆ</button><!-- ｐｄｆ显示位置--><div id="modal_data_body_pdf"><iframe id="iframe_pdf"></iframe></div>
</body></html>

前端生成pdf的ｊｓ库－pdfmake．ｊｓ的简单使用相关推荐

web端生成pdf，前端生成pdf导出并自定义页眉页脚
web前端生成pdf文档描述解决办法技术栈逻辑直接上代码,后边再唠叨,注释写的还算清晰吧用到的方法模拟数据最终版截图扔这儿一个开始唠叨需求梳理决定缺点描述前端导出pdf文 ...
前端生成PDF 文件教程+在线demo案例
个人博客导航页(点击右侧链接即可打开个人博客):大牛带你入门技术栈 PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨 ...
前端生成pdf并导出，解决了图片不能绘制的问题.（一）
生成pdf的方式有多种,前端后端都可生成,各有优缺点,本文主要讲解前端生成pdf的方式,并解决了图片不能绘制的问题.前端生成,使用 html2canvas进行绘制.该方式操作简单,浏览器端即可完成,不 ...
React jsPdf+html2canvas 前端生成pdf（分页截断 + 图片质量）
前言记录一下最近实现的前端生成pdf的功能,以及遇到的坑和解决方式由于笔者1年多没碰过react了,之前也比较少使用hooks,实现这个功能也是想复习一下之前的知识,如果有什么写得不好的请指出交流 ...
highlight.js css,JS库之Highlight.js的用法详解
下载到本地后,新建个页面测试 1.在head中加入css和js的引用 highlight hljs.initHighlightingOnLoad(); 2.添加对应要显示的内容 # 读取文件内容 de ...
【卡法常用 ckl.js 库】： js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度...
[卡法常用js库]: js汇合表单验证 cookie设置日期格式电话手机号码 email 整数小数金额检查参数长度 // +---------------------- ...
前端生成PDF文件实现方案
一.技术选型 1.html转换成canvas后生成图片导出pdf(本文选用) html转canvas插件:html2canvas是一款将HTML代码转换成Canvas的插件: canvas生成pdf: ...
vue前端生成PDF文档+电子印章并导出（不用后端）
效果图: 环境安装将页面html转换成图片 npm install --save html2canvas 将图片生成pdf npm install jspdf --save 创建htmlToPdf. ...
前端生成pdf 下载
前端实现HTML转PDF下载的两种方式 - 简书方式一:使用html2canvas和jspdf插件实现该方式是通过html2canvas将HTML页面转换成图片,然后再通过jspdf将图片的bas ...

前端生成pdf的ｊｓ库－pdfmake．ｊｓ的简单使用

前端生成pdf的ｊｓ库－pdfmake．ｊｓ的简单使用相关推荐

最新文章

热门文章