html实现pdf导出excel表格,纯前端文件导出-Excel/PDF

更新于: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);

}

});

}

fa25e5c2f394

Excel导出文件.png

导出PDF

PDF 导出就要麻烦多了,需要引入插件,当下比较流行的有两种:

1. jspdf + jspdf.plugin.autotable

2. jspdf + html2canvas

PS:两种方式用法差不多

方式一(推荐):jspdf + jspdf.plugin.autotable

导出PDF

ID姓名电话

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`); // 导出文件名

}

fa25e5c2f394

PDF导出文件.png

解决中文乱码

导出PDF 中文乱码是是一个很常见的问题,这里就详细说明一下解决办法之——终极方案

在上边的代码中,可以看到除了CDN引入的.js文件,还引入了一个名为msyh-normal.js的本地文件,这就是要引入的字体。

准备好一个中文字体文件(必须是 .ttf 格式)

前往 GitHub (克隆)下载文件,用来生成需要引入的 .js

打开目录下的fontconverter文件夹,并打开里边的 .html文件

fa25e5c2f394

jspdf目录.png

选择准备好的字体文件后,点击 Create按钮生成.js文件

fa25e5c2f394

选择字体文件.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('

Chinese: 中文
', {

callback: function (newDoc) {

newDoc.save('chinese-html.pdf')

}

});

doc.text("大海啊,全是水", 1, 30);

doc.save('导出PDF.pdf')

}

PS:导出文件还有优化空间,今天先到这里,后续会继续更新的~

以下是介绍两个常用的前端插件来实现HTML表格Excel导出的方法: 1. TableExport.js插件 TableExport.js是一个轻量级的jQuery插件,可以将HTML表格导出Excel、CSV、TXT和PDF格式。使用该插件需要引入jQuery库和TableExport.js文件。 ```html <!-- 引入jQuery库 --> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <!-- 引入TableExport.js文件 --> <script src="https://cdn.bootcss.com/TableExport/5.2.0/js/tableexport.min.js"></script> ``` 然后在需要导出表格上添加`data-tableexport`属性,并设置导出格式和文件名: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>30</td> <td>Female</td> </tr> </tbody> </table> <button onclick="exportTable()">Export Table</button> <script> function exportTable() { $('#myTable').tableExport({ type: 'xlsx', // 导出Excel格式 fileName: 'myTable', // 导出文件名 }); } </script> ``` 2. SheetJS.js插件 SheetJS.js是一个JavaScript库,可以将HTML表格导出Excel、CSV和JSON格式。使用该插件需要引入SheetJS.js文件。 ```html <!-- 引入SheetJS.js文件 --> <script src="https://cdn.bootcss.com/xlsx/0.16.8/xlsx.full.min.js"></script> ``` 然后在需要导出表格上添加`id`属性: ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>30</td> <td>Female</td> </tr> </tbody> </table> <button onclick="exportTable()">Export Table</button> <script> function exportTable() { /* 获取表格数据 */ var wb = XLSX.utils.table_to_book(document.getElementById('myTable'), {sheet:"Sheet1"}); /* 导出Excel文件 */ XLSX.writeFile(wb, 'myTable.xlsx'); } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值