返回列表

Chrome中,通过URL.createObjectURL方法将字符串转化为文件URL并下载

默认分类 2018/10/29 07:31

前端技术日新月异,可能不久前还在苦苦期盼的功能,转眼就实现了,说个具体实例吧, 之前在写Chrome扩展时想把所有请求返回内容都下载下来,由于扩展没有操作文件的权限, 只能绕道,最后用JSZIP才搞定,最近看到 URL.createObjectURL 方法,一查才知道可以通过 URL 全局对象提供的方法直接将字符串转化为文件在 Chrome 中方便下载了。

代码如下:

'use strict';
const b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
  const byteCharacters = atob(b64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  const blob = new Blob(byteArrays, {
    type: contentType
  });
  return blob;
}
const contentType = 'image/png';
const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
const blob = b64toBlob(b64Data, contentType);
const blobUrl = URL.createObjectURL(blob);
const img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);