JS前端建立CSV或Excel文件並瀏覽器導出下載

時間 2019-12-04

標籤前端建立 csv excel 文件瀏覽器導出下載欄目 JavaScript 简体版

原文原文鏈接

長期以來，在作文件下載功能的時候都是前端經過ajax把須要生成的文件的內容參數傳遞給後端，後端經過Java語言將文件生成在服務器，而後返回一個文件下載的鏈接地址url。前端經過location.href = url或者window.open(url),完成文件的下載。javascript

前端彷佛在這個過程當中沒有產生什麼較大的做用，無非是發送請求和打開頁面的做用。之前就在尋找這樣的文件下載方式，今天終於在業務須要的壓力下找到了對應的解決方案。html

HTML與文件下載

若是但願在前端直接出發某些資源的下載，最方便快捷的方法就是使用HTML5原生的download屬性，例如：前端

<a href="large.jpg" download>下載</a>

但顯然，若是純粹利用HTML屬性來實現文件的下載（而不是瀏覽器打開或瀏覽），對於動態內容，就無能爲力。html5

例如，咱們對於頁面進行分享的時候，但願分享圖片是頁面內容的實時截圖，此時，這個圖片就是動態的，純HTML顯然沒法知足咱們的需求，藉助JS和其餘一些HTML5特性，例如，將頁面元素轉換到canvas上，而後在轉成圖片進行下載。java

單只是完成圖片的下載不能知足平常業務的需求，對於業務需求是遠遠不夠的。git

藉助HTML5 Blob實現文本信息文件下載

若是對Blob不瞭解，能夠先看看張鑫旭的理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型一文。github

原理其實很簡單，咱們能夠將文本或者JS字符串藉助Blob轉換成二進制，而後，做爲a元素的href屬性，配合download屬性，實現下載。ajax

代碼也比較簡單，以下示例（兼容Chrome和FireFox）：json

var funDownload = function(content, filename){
    // 建立隱藏的可下載連接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 字符內容轉變成blob地址
    var blob = new Blob([content]);
    eleLink.href = URL.createObjectURL(blob);
    // 觸發點擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 而後移除
    document.body.removeChild(eleLink);
};

其中，content指須要下載的文本或者字符串內容，filename指下載到系統中的文件名稱。canvas

藉助Base64實現任一文件下載

對於非文本文件，也是能夠直接JS觸發下載的，例如，若是咱們想下載一張圖片，能夠把這張圖片轉換成Base64格式，而後下載。

代碼示例：

var funDownload = function(domImg, filename){
    // 建立隱藏的可下載連接
    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';
    // 圖片base64地址
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var width = domImg.natureWidth;
    var height = domImg.natureHeight;
    context.drawImage(domImg, 0, 0);
    // 若是是PNG圖片，則context.toDataURL('image/png');
    eleLink.href = context.toDataURL('image/jpeg');
    // 觸發點擊
    document.body.appendChild(eleLink);
    eleLink.click();
    // 移除
    document.body.removeChild(eleLink);
};

不止是.html文件，.txt,.json等只要內容是文本的文件，均可以利用這種小技巧實現下載。

在Chrome瀏覽器下，模擬點擊建立的a元素及時不append到頁面中，也是能夠觸發下載的，可是在FireFox瀏覽器中卻不行，所以，上面的funcDownload()方法有一個appendChild和removeChild的處理，就是爲了兼容FireFox瀏覽器。

繼續說實如今下CSV文件的方法

咱們經過ajax從後端請求到的數據通常都是json格式，也就是說須要把json數據轉成csv格式的數據，通過尋找終於找到了一個比較好用的json轉csv的工具。

直接上示例代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Download</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="demo">
        <p><input type="button" value="做爲test.html文件下載"></p>
    </div>
    <script src="json2csv.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        // 示例數據
        var fields = ['car', 'price', 'color'];
        var myCars = [
          {
            "car": "Audi",
            "price": 40000,
            "color": "blue"
          }, {
            "car": "BMW",
            "price": 35000,
            "color": "black"
          }, {
            "car": "Porsche",
            "price": 60000,
            "color": "green"
          }
        ];
        // json數據轉csv格式
        var csv = json2csv({ data: myCars, fields: fields });

        var eleButton = document.querySelector('input[type="button"]');

        // 下載文件方法
        var funDownload = function (content, filename) {
            var eleLink = document.createElement('a');
            eleLink.download = filename;
            eleLink.style.display = 'none';
            // 字符內容轉變成blob地址
            var blob = new Blob([content]);
            eleLink.href = URL.createObjectURL(blob);
            // 觸發點擊
            document.body.appendChild(eleLink);
            eleLink.click();
            // 而後移除
            document.body.removeChild(eleLink);
        };

        if ('download' in document.createElement('a')) {
            // 做爲test.html文件下載
            eleButton.addEventListener('click', function () {
                funDownload(csv, 'test.csv');    
            });
        } else {
            eleButton.onclick = function () {
                alert('瀏覽器不支持');    
            };
        }
    </script>
</body>
</html>