【feature】支持 Blob 下载的一种方式

[jeasonnow]

这是关于什么？

这里讨论下我折腾下载的一些思路，目前解决了在 Pake 中无法通过 blob 方式下载文件的问题。

思路

1. 全局捕获 createObjectUrl 中 blob 和 blob url 的映射关系。
2. 通过 click 全局监听捕获 a 标签模拟点击下载 blob url 事件，通过上一步获取的映射关系拿到完整的 blob 以及下载文件名（通过 a.download ）
3. 通过 Tauri 中的全局 api 在点击事件发起的同时，使用 writeBinaryFile 将通过 FileReader 转换 blob 得到的 ArrayBuffer 直接存储到硬盘中。

实现

// event.js 
// Collect blob urls to blob by overriding window.URL.createObjectURL
function collectUrlToBlobs() {
  const backupCreateObjectURL = window.URL.createObjectURL;
  window.blobToUrlCaches = new Map();
  window.URL.createObjectURL = (blob) => {
    const url = backupCreateObjectURL.call(window.URL, blob);
    window.blobToUrlCaches.set(url, blob);
    return url;
  }  
}

// convert blobUrl to binary for tauri api
function converBlobUrlToBinary(blobUrl) {
  return new Promise((resolve) => {
    const blob = window.blobToUrlCaches.get(blobUrl);
    const reader = new FileReader();
    
    reader.readAsArrayBuffer(blob);
    reader.onload = () => {
      resolve(reader.result);
    };
  })
}

// download by tauri api replace invoke download_file
if (absoluteUrl.includes('blob:')) {
    // convert blob url to binary file
    converBlobUrlToBinary(absoluteUrl).then(binary => {
      const tarui = window.__TAURI__;
      tarui.fs.writeBinaryFile(anchorElement.download, binary, {
        dir: tarui.fs.BaseDirectory.Download,
      });

    })
    return;
  }

需要补充的问题

• tauri 有严格的权限限制，需要放开 api 的权限且配置对应的可调用 api 域名配置：dangerousDisableAssetCspModification
• 通过这种方式需要更改 cli 生成项目模板的逻辑，通过获取生成应用的 url 并将其替换到模板中的 pake.json 和 tauri.conf.json 中并新增部分权限配置才能保证功能的正常，和原有的通过 jsBridge 调取 rust API 的设计有些出入。

最后

欢迎大家讨论下，我觉得思路应该是没问题的，关键在于 blob -> binary -> download 的链路中，download 到底是该在 js 中调用，还是在 rust 中调用。

[tw93]

思路牛B，我在代码里面试试

[jeasonnow]

坐等修复。😎

[jeasonnow]

如果动态创建的 a 标签不 append 到真实的文档而只停留在内存中，那么会存在无法检测点击事件问题，目前在 figma 发现了该现象，可能需要改变捕获下载事件的位置。

// if don't append to document
var url = URL.createObjectURL(blob);
var element = document.createElement("a");
element.href = url;
var hasAnchorDownload = typeof element["download"] != "undefined";
if (hasAnchorDownload) {
    element["download"] = name
}
if (_PlatformInfoObj.isSafari()) {
    if (!hasAnchorDownload) {
        element["target"] = "_blank"
    }
    element.click()
} else if (_PlatformInfoObj.isFirefox()) {
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element)
} else {
    element.click()
}

解法也很简单，直接捕获 createElement 中创建 a 标签的事件，针对 url 为 blob url 的进行下载处理

const backup = document.createElement;
document.createElement = function(el) {
  if (el === 'a') {
      const a = backup.call(document, el);
      const clickEvent = a.click || (() => {});
      Object.defineProperties(a, {
          click: {
              get: () => {
                  const downloadInfo = {url: a.href, download: a.download};
                  // download with this info
                  console.log(downloadInfo);
                  return clickEvent.bind(a);
              }
          }
      })
      return a;
  }
  return backup.call(document, el);
}

[tw93]

已经合并到代码