更新于：2020-6-29
導(dǎo)出Excel
Excel 的導(dǎo)出還是比較容易的，不需要引入什么插件，利用JS的原生對(duì)象Blob即可實(shí)現(xiàn)。
通常情況下，前端導(dǎo)出文件都要伴隨著一個(gè)請(qǐng)求，將獲得json數(shù)據(jù)，轉(zhuǎn)成可導(dǎo)出的文件，所以需要有一個(gè)ajax請(qǐng)求
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel文件導(dǎo)出</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<button onclick="ExcelBtn()">點(diǎn)我導(dǎo)出Excel</button>
<script>
function ExcelBtn(){
$.ajax({
url:'http://rap2.taobao.org:38080/app/mock/259338/Excel', // 你自己的url地址
type:'POST', // POST/GET
data:{}, // 請(qǐng)求參數(shù)
success:function(res){
// res = JSON.parse(res); //如果后臺(tái)傳過(guò)來(lái)的是字符串，需要轉(zhuǎn)成字符串對(duì)象
let ExcelCont = `ID,姓名,電話`; //這里定義了表頭
if(res.data.length > 0){
for(let i = 0;i<res.data.length;i++){
// 這里的格式不要變，因?yàn)閾Q行會(huì)影響生成的表格
ExcelCont += `
${res.data[i].id},${res.data[i].name},${res.data[i].tel}`
};
};
var blob = new Blob([ExcelCont], {type: "text/plain;charset=utf-8"});
//解決中文亂碼問(wèn)題
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 = `導(dǎo)出Excel.xls`; //報(bào)表名稱
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
}
</script>
</body>
</html>
Excel導(dǎo)出文件.png
導(dǎo)出PDF
PDF 導(dǎo)出就要麻煩多了，需要引入插件，當(dāng)下比較流行的有兩種：
1. jspdf + jspdf.plugin.autotable
2. jspdf + html2canvas
PS：兩種方式用法差不多
方式一（推薦）：jspdf + jspdf.plugin.autotable
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>導(dǎo)出PDF</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.js"></script>
<script src="./msyh-normal.js"></script>
</head>
<body>
<table id='PDF-Table'>
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>電話</td>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>小明</td>
<td>880-400-123</td>
</tr>
<tr>
<td>1002</td>
<td>小紅</td>
<td>880-400-456</td>
</tr>
</tbody>
</table>
<button onclick='PDFBtn()'>點(diǎn)我導(dǎo)出PDF</button>
<script>
function PDFBtn(){
var doc = new jsPDF('p', 'pt'); // 初始化示例，更多配置項(xiàng)看官網(wǎng)api
doc.setFont('msyh','normal'); // 中文亂碼
doc.text("報(bào)表PDF", 40, 50); // 表title（不在表格內(nèi)）、距離左邊距離、距離上邊距離
var res = doc.autoTableHtmlToJson(document.getElementById("PDF-Table")); // 獲取表格的數(shù)據(jù)
doc.autoTable(res.columns, res.data, {
startY: 60, // 距離上距離（因?yàn)樵O(shè)置了表title,如果不設(shè)置這個(gè)參數(shù)會(huì)被擋?。? styles: {font: 'msyh'}, // 給表格內(nèi)容設(shè)置自定義字體
theme: 'grid' //設(shè)置主題
}); // 渲染數(shù)據(jù)，列、數(shù)據(jù)、距離上邊距離，更多配置項(xiàng)看官網(wǎng)api
doc.save(`導(dǎo)出PDF.pdf`); // 導(dǎo)出文件名
}
</script>
</body>
</html>
PDF導(dǎo)出文件.png
解決中文亂碼
導(dǎo)出PDF 中文亂碼是是一個(gè)很常見的問(wèn)題，這里就詳細(xì)說(shuō)明一下解決辦法之——終極方案
在上邊的代碼中，可以看到除了CDN引入的.js文件，還引入了一個(gè)名為msyh-normal.js的本地文件，這就是要引入的字體。
準(zhǔn)備好一個(gè)中文字體文件（必須是 .ttf 格式）
前往 GitHub (克隆)下載文件，用來(lái)生成需要引入的 .js
-
打開目錄下的fontconverter文件夾，并打開里邊的 .html文件
jspdf目錄.png 選擇準(zhǔn)備好的字體文件后，點(diǎn)擊 Create按鈕生成.js文件
選擇字體文件.png
PS：如上圖，fontName可以不用填寫，選擇了字體文件后會(huì)自動(dòng)填寫
- 將生成的.js文件引入頁(yè)面（按照上邊的代碼做些小設(shè)置），即可
方式二 ：jspdf + html2canvas
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>導(dǎo)出PDF</title>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script src="./msyh-normal.js"></script>
</head>
<body>
<button onclick='PDFBtn()'>點(diǎn)我導(dǎo)出PDF</button>
<script>
function PDFBtn(){
let doc = new jsPDF({ orientation: 'p', format: 'a4' });
doc.setFont('msyh', 'normal');
doc.setFontSize(20);
doc.html('<div style="font-faimly:msyh;">Chinese: 中文</div>', {
callback: function (newDoc) {
newDoc.save('chinese-html.pdf')
}
});
doc.text("大海啊，全是水", 1, 30);
doc.save('導(dǎo)出PDF.pdf')
}
</script>
</body>
</html>
PS：導(dǎo)出文件還有優(yōu)化空間，今天先到這里，后續(xù)會(huì)繼續(xù)更新的~
