純前端文件導出-Excel/PDF

更新于:2020-6-29

導出Excel

Excel 的導出還是比較容易的,不需要引入什么插件,利用JS的原生對象Blob即可實現。
通常情況下,前端導出文件都要伴隨著一個請求,將獲得json數據,轉成可導出的文件,所以需要有一個ajax請求

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel文件導出</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <button onclick="ExcelBtn()">點我導出Excel</button>
    <script>
        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<res.data.length;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);
                }
            });
        }
    </script>
</body>
</html>
Excel導出文件.png

導出PDF

PDF 導出就要麻煩多了,需要引入插件,當下比較流行的有兩種:
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>導出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()'>點我導出PDF</button>
    <script>
        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`);        // 導出文件名
        }
    </script>
</body>
</html>
PDF導出文件.png
解決中文亂碼

導出PDF 中文亂碼是是一個很常見的問題,這里就詳細說明一下解決辦法之——終極方案

在上邊的代碼中,可以看到除了CDN引入的.js文件,還引入了一個名為msyh-normal.js的本地文件,這就是要引入的字體。

  1. 準備好一個中文字體文件(必須是 .ttf 格式)

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

  3. 打開目錄下的fontconverter文件夾,并打開里邊的 .html文件

    jspdf目錄.png

  4. 選擇準備好的字體文件后,點擊 Create按鈕生成.js文件

選擇字體文件.png

PS:如上圖,fontName可以不用填寫,選擇了字體文件后會自動填寫

  1. 將生成的.js文件引入頁面(按照上邊的代碼做些小設置),即可
方式二 :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>導出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()'>點我導出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('導出PDF.pdf')
        }
    </script>
</body>
</html>

PS:導出文件還有優化空間,今天先到這里,后續會繼續更新的~

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。