Question

chrome和mozilla浏览器正常工作但在mac safari浏览器中无法正常工作

  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);
            window.open(csvFile, "amit");

Answer 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 route：

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);
}

Answer 2

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

显然，这是{em>有时发生的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");
?>

safari浏览器下载csv无法使用Blob工作

chrome和mozilla浏览器正常工作但在mac safari浏览器中无法正常工作

2 个答案: