由于项目体积过大,以至于分包后也逐步超过了小程序的限制,所以将 h5 端的页面以 web-view 的方式嵌入了小程序。这也产生了一些意料之外的问题,这里记一个关于文件预览下载的问题。
在 h5 端中,针对图片和视频会使用 img、video 标签达到预览的效果,其余的文件类型会直接粗暴的调用 window.open
的方式打开,如果浏览器能够解析则预览,不能解析浏览器会默认下载。(这里有个问题,ios 的手机对于不能识别的文件会显示乱码)
嵌入小程序并配置了附件存储的业务域名之后发现使用 android 手机调用 window.open
会出现白屏,ios 手机则没有问题。
类似问题
尝试使用 iframe 标签达到类似的效果,但是在小程序中也是没有效果的。
后面同事给了个思路,对于需要 window.open
打开的文件,直接跳转到一个特定的小程序原生页面,借助小程序的 api 预览文件。如果小程序环境也无法预览的文件,则使用小程序的 api 下载文件。
import wx from 'weixin-js-sdk'
if (
process.env.TARO_ENV === 'h5' &&
window.__wxjs_environment &&
window.__wxjs_environment === 'miniprogram'
) {
wx.miniProgram.navigateTo({
url: `/pages/file/index?
fileExt=${fileExt}
&tokenId=${tokenId}
&fileName=${fileName}
&filePath=${encodeURIComponent(filePath)}
`,
})
}
这里有几个点需要注意一下
encodeURIComponent
方法转义。如果 filePath 路径中包含一些参数,不转义的情况下路由跳转的过程中会丢失 const { filePath, fileExt, tokenId, fileName } = this.queryParams
const supports = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']
// 支持预览
if (supports.includes(fileExt)) {
const downloadResponse: any = await toPromise(wx.downloadFile, {
url: filePath,
header: {
'cookie': `tokenId=${tokenId};`,
}
})
const { tempFilePath } = downloadResponse
const openResponse = await toPromise(wx.openDocument, {
filePath: tempFilePath,
fileType: fileExt
})
} else {
// 该文件类型不支持预览,下载
const filePath = wx.env.USER_DATA_PATH + `/${fileName}`
const saveResponse = await toPromise(wx.getFileSystemManager().saveFile, {
filePath,
tempFilePath,
})
}
这里有几个点需要注意一下