下载通过输入字段上传的 PNG 文件

Question

我通过

上传了一个文件

<input> id="pdf" type="file"></input>

我可以通过

访问它的内容

var inp = document.querySelector("#pdf");
var text = await inp.files[0].text()

调用我的下载函数时出现“失败 - 网络错误”(Chromium)，而在 Firefox 中没有任何反应（函数 returns 未定义）。

download("viainput.png",text);

但是我很难将同一个文件保存到文件系统，我总是得到损坏的文件。我的下一步是通过 webrtc 将其作为编码文本发送给另一个用户

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:image/png;base64,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
 
  element.style.display = 'none';
  document.body.appendChild(element);
 
  element.click();
 
  document.body.removeChild(element);
}
 
// Start file download.
download("hello.png",'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

Answer 1

您当前的解决方案不起作用，因为您在本应采用 base64 编码的字符串中提供了 URL 编码的数据。但是忘了那个吧。 data: URL 大部分已成为过去（或应该成为过去）。

执行此操作的有效方法是不将图像编码为字符串。相反，直接使用从输入中获得的文件。

var file = inp.files[0] // this is what you use
// as second argument for `download`

function download(filename, blob) {
  const link = document.createElement('a')
  const url = URL.createObjectURL(blob)
  link.href = url
  link.download = filename
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url) // if you're done with that file
}

您也可以将文件（原型为 Blob）直接发送到 WebRTC 数据通道，然后在另一端从接收到的 Blob 创建对象URL。

下载通过输入字段上传的 PNG 文件

Download a PNG file that was uploaded via an input field

html

javascript

encoding