为什么使用 javascript 下载后本地文件显示已损坏？

Question

下午好，
场景：我在本地系统上有 pdf 文件，当用户单击按钮时，我希望它被下载。但是在下载文件后打开时显示已损坏。发布此查询时，我注意到正在下载的文件大小为 1KB，原始文件大小为 28KB。我不明白为什么？
我在后端创建 excel 文件并保存在用户位置，因为数据量很大，这会花费很多时间，因此一旦创建文件，用户就可以下载文件。

以下为JS代码。

function download() {
    var filename="output.pdf";
    var element = document.createElement('a');
    var fileloc="C:\ebooks\PDF\abc.pdf";
    element.setAttribute('href','data:text/plain;charset=utf-8, ' + 
    encodeURIComponent(fileloc));
    element.setAttribute('download', filename);
    document.body.appendChild(element);
    element.click();
}

原文件很好。请指正我做错了什么。

Answer 1

您正在创建的 data: 方案 URL 解析为包含 文本 纯文本文档（不是 PDF） =33=] C:\ebooks\PDF\abc.pdf.

您正在使用 .pdf 扩展名保存此文件，因此当您尝试打开它时，您的 PDF reader 会尝试将其读取为 PDF（它不是）。

如果您想将文件的内容保存到您指定的路径，那么您需要：

让用户 select 使用 <input type="file"> 文件（因为 JS 不允许访问用户磁盘上的文件，除非他们 select 明确地生成 URL 使用 the FileReader.readAsDataURL() method.

如果你是在服务器上创建文件，如你所说，那么就不需要构建data:方案URL，你可以直接使用https:方案URL 指向服务器上的文件。

为什么使用 javascript 下载后本地文件显示已损坏？

Why local file is showing corrupted after downloading using javascript?

javascript

angularjs