无法从mac上的safari 12.1保存blob url pdf

Question

I am setting the iframe src to a blob url with format "blob: http://localhost:3000/f87808a3-9a74-4d61-b7ae-7ac37ff38325 ". The iframe displays a pdf which was created with some javascript. Displaying the pdf works as expected in all browsers. In Chrome and Firefox it is possible to download this pdf to the hard drive, with the browsers integrated pdf viewers.

However in Safari 12.1 on mac, when clicking the download button of the pdf viewer nothing happens.

Is this a known bug in Safari?

Are there ways to make pdf blob url downloads work in Safari?

Answer 1

This is related to my answer here .

Apparently this is a Safari 12.1 bug that sometimes happens. It's not fixed by target = "_self" , which pertains to a different regression bug .

Until the bug is fixed, the ugly workaround is:

1. Send the blob to the server which saves the file remotely.
2. Download the remote file.

Javascript Code

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

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

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

PHP Code

In upload.php:

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


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

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

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

In 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: application/pdf", false);
    readfile("temp/download.pdf");

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