Question

我正在尝试仅从dataURL制作可下载文件，但我不确定为什么它不起作用。我正在从文件中读取dataURL，并将其dataURL插入具有download属性的。但是，当我生成de单击时，页面变为空白，并说找不到页面。这就是我试图做到的方式。

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

您的方法是错误的。

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>

有用的资源

使用dataURL制作可下载文件

1 个答案: