jquery插件导出excel和pdf(解决中文乱码问题)
参考文件:http://jackyrong.iteye.com/blog/2169683
https://my.oschina.net/aruan/blog/418980
https://segmentfault.com/a/1190000013168209
js引用文件地址:https://files.cnblogs.com/files/likui-bookHouse/tableExport.jquery.plugin-master.rar
html文件代码:
<html> <head> <title>Export html table to excel and csv using jquery</title> <script src="~/Content/js/jquery-1.7.1.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script type="text/javascript" src="~/Content/js/excel/jquery.base64.js"></script> <script type="text/javascript" src="~/Content/js/excel/tableExport.js"></script> <script type="text/javascript" src="~/Content/js/excel/jspdf/libs/sprintf.js"> </script> <script type="text/javascript" src="~/Content/js/excel/jspdf/jspdf.js"></script> <script type="text/javascript" src="~/Content/js/excel/jspdf/libs/base64.js"></script> </head> <body> [align=right] <br><br><br> <button class="btn btn-success" onClick="$('#customers').tableExport({type: 'excel', escape: 'false'});">Excel Export</button> <button class="btn btn-success" onClick="$('#customers').tableExport({type: 'pdf', escape: 'false'});">CSV Export</button> <br><br> [/align] <table id="customers" class="table table-striped table-bordered"> <thead> <tr class='warning'> <th>Country</th> <th>Population</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>Chinna</td> <td>1,363,480,000</td> <td>March 24, 2014</td> </tr> <tr> <td>India</td> <td>1,241,900,000</td> <td>March 24, 2014</td> </tr> <tr> <td>United States</td> <td>317,746,000</td> <td>March 24, 2014</td> </tr> <tr> <td>Indonesia</td> <td>249,866,000</td> <td>July 1, 2013</td> </tr> <tr> <td>Brazil</td> <td>201,032,714</td> <td>July 1, 2013</td> </tr> <tr> <td>澳大利亚</td> <td>2018年3月20日</td> <td>二零一八年三月二十日</td> </tr> </tbody> </table> </div> </body> </html>
显示效果:
导出pdf(解决中文乱码问题)
导出过程中发现中文显示乱码,根据文档发现jsPDF不支持中文,网上资料是使用html2canvas
方式转换canva
方式,并不是十分灵活。后根据项目jsPDF-CustomFonts-support引入中文字体,解决了导出pdf后中文字体显示乱码的问题。
将项目源码下载到本地,dist文件夹下为相关脚本,font文件夹下为相关字体文件。
脚本实现:tabExport.js 中的代码
}else if(defaults.type == 'pdf'){ //var doc = new jsPDF('p','pt', 'a4', true); //doc.setFontSize(defaults.pdfFontSize); var doc = new jsPDF('p', 'pt', 'a6'); //a4:表示打印的pdf纸张大小(这个设置得越大,会显得内容越小) doc.addFont('NotoSansCJKtc-Regular.ttf', 'NotoSansCJKtc', 'normal'); //添加字体 //pdf标题设置 doc.setFont('NotoSansCJKtc'); //设置字体 //pdf标题设置 doc.text(20, 20, '导出标题'); //并且设置字体大小为5。(之前采用它默认的字体大小,打印的pdf字体都堆在一起了。都是泪啊!) doc.setFontSize(5);
好了,pdf文件打印出来了,看效果吧!
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
第二种打印pdf的方法(把文字部分转换为图片类型,然后再打印成pdf文件)
4、具体操作
1)下载jspdf插件,官网有。
2)html页面引用两个js文件 jspdf.debug.js 和 html2canvas.js (利用该插件将html页面转化成图片,在插入到pdf中)
这里我没引入jspdf.debug.js,而是引用的jspdf.js(它们都包含了所有文件)
3)编写一个js方法 即可实现 转化pdf。并可以指定导出区域。
pdf.js中的方法代码:
function exportPhotoPdf() { if(confirm("您确认下载打印pdf的功能模板?")){ var pdf = new jsPDF('p','pt','a4'); // 设置打印比例 越大打印越小 pdf.internal.scaleFactor = 2; var options = { pagesplit: true, //设置是否自动分页 "background": '#FFFFFF' //如果导出的pdf为黑色背景,需要将导出的html模块内容背景 设置成白色。 }; var printHtml = $('#customers').get(0); // 页面某一个div里面的内容,通过id获取div内容 pdf.addHTML(printHtml,15, 15, options,function() { pdf.save('pdf打印功能测试.pdf'); }); } }
点击打印按钮,打印效果如下:
总结:这种方法导出的pdf格式效果最理想,但是不支持中文。并且相对于第一种方法,清晰度不够。第一种方法虽然很清晰,但样式消失了。算是各有各的优点吧!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库