wx.previewFile

wx.previewFile文档没有那么详细，在初次使用时会有很多问题不能使用，比如配置项 size 如何获取，下面记录一下如何正确使用此方法和遇到一些问题的解决方式。

基本使用

1
2
3
4
5
wx.previewFile({
	url: "", // 需要预览文件的地址(必填，可以使用相对路径)
	name: "", // 需要预览文件的文件名，必须有带文件格式的后缀，例如.doc(不填的话取url的最后部分，最后部分是个包含格式后缀的文件名)
	size: 1048576, // 需要预览文件的字节大小(必填，而且大小必须正确，否则会打开失败)
});

注意事项

  • url

url 需要是一个文件地址，但不支持 blob 链接，所以不要去尝试通过 window.URL.createObjectURL(blob)这种方式去转化

  • name

如果其他配置上没问题，在 ios 或 mac 设备上提示下载失败，请检查网络，可以看看文件名是否带中文，有中文的话 ios 或 mac 上是解析不了，需要修改文件名

  • size 获取

关于 size，是文件的具体字节大小，不是多少 kb/m/g 这种形式，可以考虑使用 HEAD 请求文件链接，通过 headers 中 Content-Length 获取文件字节大小，前提是文件域名支持跨域以及 HEAD 方式请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
fetch(url, {
	method: "HEAD",
})
	.then((response) => {
		if (response.ok) {
			// 获取Content-Length字段的值，它代表文件的大小（以字节为单位）
			const contentLength = response.headers.get("Content-Length");
			wx.previewFile({
				url, // 需要预览文件的地址(必填，可以使用相对路径)
				name, // 需要预览文件的文件名，必须有带文件格式的后缀，例如.doc(不填的话取url的最后部分，最后部分是个包含格式后缀的文件名)
				size: contentLength, // 需要预览文件的字节大小(必填，而且大小必须正确，否则会打开失败)
				success: () => {},
				fail: (err) => {},
			});
		}
	})
	.catch((error) => {
		console.error("获取PDF文件大小时发生错误:", error);
	});