safari 浏览器下载 csv 无法使用 Blob答案

【问题标题】：safari browser download csv not working using Blobsafari 浏览器下载 csv 无法使用 Blob
【发布时间】：2015-11-17 17:41:53
【问题描述】：

chrome 和 mozilla 浏览器正常工作，但在 mac safari 浏览器中不工作

var convertCsv = "姓名、职务、城市、州、电子邮件、手机号码、角色类型、signUpDate+\n" + "A,B,C,D,F,G,I,J \n" + "A1,B1,C1,D1,F1,G1,I1,J1"; var data = new Blob([convertedCsv], {type: 'text/csv'}); var csvFile = window.URL.createObjectURL(data); window.open(csvFile, "amit");

【问题讨论】：

标签： csv

【解决方案1】：

创建一个节点代理并将标头设置为：

router.get("/downloadList/:Id/:fileName", function(req, res) {
// Set hedders to CSV and giving file name
res.setHeader('Content-disposition', 'attachment; filename=' + req.params.fileName + '.csv');
res.set('Content-Type', 'text/csv');
var url = 'https://' + host_name + '/v1/downloadCsv/' + req.params.Id;
client.get(url, function(data) {
    dateReceived(data);
});

function dateReceived(data) {
    var outerData = data;
        res.send(outerData);
    }
});

从客户端，请求指向节点JS路由：

function downloadCSV(Id) {
     // Create file name and pass it to nodeJS
     var fileName = "yourFileName";
     var e = document.createElement('a');
     e.href = window.location.origin + "/api/v1/home/downloadList/" + Id + "/" + fileName;
     e.target = '_blank';
     document.body.appendChild(e);
     e.click();
     document.body.removeChild(e);
}

【讨论】：

【解决方案2】：

这与我的回答 here 有关，为 csv 和您的代码编辑。

显然这是一个有时会发生的Safari 12 bug。 target = "_self" 没有修复它，它属于 different regression bug。

在修复错误之前，丑陋的解决方法是：

将 blob 发送到远程保存文件的服务器。
下载远程文件。

Javascript 代码

   async createDownloadElementAndClick(csvFile, fileName) {
            let options = {
                method:"POST",
                body:csvFile
            };

            await fetch(`https://example.com/upload.php`, options);

            window.open(`https://example.com/download.php?${fileName}`, "_self");
    }

所以从你原来的代码，改成：

 var convertedCsv = "name,Designation,City,State,email,mobileNumber,roleType,signUpDate+\n" +
                    "A,B,C,D,F,G,I,J \n" +
                    "A1,B1,C1,D1,F1,G1,I1,J1";
 var data = new Blob([convertedCsv], {type: 'text/csv'});
 var csvFile = window.URL.createObjectURL(data);
 //just add this to replace window.open()
 createDownloadElementAndClick(csvFile, "myFile.csv")

PHP 代码

在upload.php中：

<?php    
// add any authentication code as necessary here


    // gets entire POST body
    $data = file_get_contents('php://input');

    $filename = "temp/download.csv";
    // write the data out to the file
    $fp = fopen($filename, 'wb');

    fwrite($fp, $data);
    fclose($fp);
?>

在download.php中：

<?php
    ob_start();
    $file = $_SERVER["QUERY_STRING"];

    // This is the line that tells Safari to download the file instead of opening it
    header("Content-disposition: attachment; filename=$file");
    header("Content-type: text/csv", false);
    readfile("temp/download.csv");

    ob_flush();
    // This deletes the file so there is little chance of contaminating the next call
    unlink("temp/download.csv");
?>

【讨论】：