纯前端生成的 Blob 流,如何下载并打开?

纯前端生成的 blob 流,如何下载并打开?

如何下载纯前端生成的 blob 流?

在前端生成 blob 流但没有 url 时,在 h5 环境和小程序中将其下载到手机并打开可能会遇到一些挑战。

方法:

将 blob 流转换为 base64 编码字符串

let reader = new filereader();
reader.readasdataurl(blob);
reader.onload = function() {
  let base64data = reader.result;
};

针对小程序环境

使用 wx.filesystemmanager.writefilesync 将 base64 编码数据写入临时文件中,然后使用 wx.downloadfile 下载保存的本地临时文件,最后使用 wx.opendocument 打开文件。

wx.fileSystemManager.writeFileSync(wx.env.USER_DATA_PATH + '/tempFile.txt', base64data.split(',')[1], 'base64');
wx.downloadFile({
  url: wx.env.USER_DATA_PATH + '/tempFile.txt',
  success: function(res) {
    if (res.statusCode === 200) {
      wx.openDocument({
        filePath: res.tempFilePath,
        success: function(res) {
          console.log('打开文档成功');
        }
      });
    }
  }
});

以上就是纯前端生成的 Blob 流,如何下载并打开?的详细内容,更多请关注硕下网其它相关文章!