更新于:2020-6-29
导出Excel
Excel 的导出还是比较容易的,不需要引入什么插件,利用JS的原生对象Blob即可实现。
通常情况下,前端导出文件都要伴随着一个请求,将获得json数据,转成可导出的文件,所以需要有一个ajax请求
Excel文件导出点我导出Excel
function ExcelBtn(){
$.ajax({
url:'http://rap2.taobao.org:38080/app/mock/259338/Excel', // 你自己的url地址
type:'POST', // POST/GET
data:{}, // 请求参数
success:function(res){
// res = JSON.parse(res); //如果后台传过来的是字符串,需要转成字符串对象
let ExcelCont = `ID,姓名,电话`; //这里定义了表头
if(res.data.length > 0){
for(let i = 0;i
// 这里的格式不要变,因为换行会影响生成的表格
ExcelCont += `
${res.data[i].id},${res.data[i].name},${res.data[i].tel}`
};
};
var blob = new Blob([ExcelCont], {type: "text/plain;charset=utf-8"});
//解决中文乱码问题
blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type});
object_url = window.URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = object_url;
link.download = `导出Excel.xls`; //报表名称
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
}
Excel导出文件.png
导出PDF
PDF 导出就要麻烦多了,需要引入插件,当下比较流行的有两种:
1. jspdf + jspdf.plugin.autotable
2. jspdf + html2canvas
PS:两种方式用法差不多
方式一(推荐):jspdf + jspdf.plugin.autotable
导出PDFID姓名电话
1001小明880-400-1231002小红880-400-456点我导出PDF
function PDFBtn(){
var doc = new jsPDF('p', 'pt'); // 初始化示例,更多配置项看官网api
doc.setFont('msyh','normal'); // 中文乱码
doc.text("报表PDF", 40, 50); // 表title(不在表格内)、距离左边距离、距离上边距离
var res = doc.autoTableHtmlToJson(document.getElementById("PDF-Table")); // 获取表格的数据
doc.autoTable(res.columns, res.data, {
startY: 60, // 距离上距离(因为设置了表title,如果不设置这个参数会被挡住)
styles: {font: 'msyh'}, // 给表格内容设置自定义字体
theme: 'grid' //设置主题
}); // 渲染数据,列、数据、距离上边距离,更多配置项看官网api
doc.save(`导出PDF.pdf`); // 导出文件名
}
PDF导出文件.png
解决中文乱码
导出PDF 中文乱码是是一个很常见的问题,这里就详细说明一下解决办法之——终极方案
在上边的代码中,可以看到除了CDN引入的.js文件,还引入了一个名为msyh-normal.js的本地文件,这就是要引入的字体。
准备好一个中文字体文件(必须是 .ttf 格式)
前往 GitHub (克隆)下载文件,用来生成需要引入的 .js
打开目录下的fontconverter文件夹,并打开里边的 .html文件
jspdf目录.png
选择准备好的字体文件后,点击 Create按钮生成.js文件
选择字体文件.png
PS:如上图,fontName可以不用填写,选择了字体文件后会自动填写
将生成的.js文件引入页面(按照上边的代码做些小设置),即可
方式二 :jspdf + html2canvas
导出PDF点我导出PDF
function PDFBtn(){
let doc = new jsPDF({ orientation: 'p', format: 'a4' });
doc.setFont('msyh', 'normal');
doc.setFontSize(20);
doc.html('
callback: function (newDoc) {
newDoc.save('chinese-html.pdf')
}
});
doc.text("大海啊,全是水", 1, 30);
doc.save('导出PDF.pdf')
}
PS:导出文件还有优化空间,今天先到这里,后续会继续更新的~