使用 dataURL 制作可下载的文件答案

【问题标题】：Making a downloadable file with the dataURL使用 dataURL 制作可下载的文件
【发布时间】：2018-11-22 23:16:30
【问题描述】：

我正在尝试仅从 dataURL 制作可下载文件，但我不确定它为什么不起作用。我正在从文件中读取 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 进行下载操作？

【问题讨论】：

你能分享你的HTML代码吗？
我从这个 html 表单中获取文件：ChooseFile

标签： javascript html data-uri

【解决方案1】：

你的方法是错误的。

readAsDataURL 方法用于读取指定 Blob 或 File 的内容。结果将是 base64 编码的字符串。

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>

有用的资源

【讨论】：