使用 dataURL 制作可下载文件

Question

我正在尝试仅从一个数据 URL 制作一个可下载文件，但我不确定为什么它不起作用。我正在从文件中读取 dataURL 并将其 dataURL 插入到具有下载属性的文件中。但是当我生成 de click 页面时，页面变为空白并表示找不到该页面。这是我正在尝试的方法。

reader.readAsDataURL(file);
reader.onload = function (evt) {
    var element = document.createElement('a');
    element.setAttribute('href', evt.target.result);
    var name=filename.split(".");
    element.setAttribute('download', 'filename');

    element.style.display = 'inline-block';
    document.body.appendChild(element);

    element.click();

    document.body.removeChild(element);
 }

从上面的代码我得到这个

如何正确地对 dataURL 进行下载操作？

Answer 1

你的做法是错误的。

The readAsDataURL method is used to read the contents of the specified Blob or File. The result will be base64 encoded string.

可以使用readAsDataUrl方法进行图片预览。

下载文件可以通过这种方式

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
     <form>
        <label for="file">ChooseFile</label>
        <input type="file" id="myFile" accept="image/*">
    </form>

    <script>
        document.getElementById("myFile").addEventListener("change", downloadFile);

        function downloadFile() {            
            let file = this.files[0];
            let url = URL.createObjectURL(file);

            let link = document.createElement('a');
            link.href = url;
            link.download = file.name;
            link.click();
            link = null;

            URL.revokeObjectURL(url);
        }
    </script>
  </body>
</html>

有用的资源

使用 dataURL 制作可下载文件

Making a downloadable file with the dataURL

html

javascript

data-uri