ww.previewFile

本节目标：理解“ww.previewFile”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 ww.previewFile 方法可以在 企业微信（即政务微信） 中预览文件，但它要求 url 参数为文件的网络地址，因此不能直接接受 Blob 或流数据。对于这种情况，您需要先将从后端获取的文件流（Blob）上传到一个可以在微信中访问的服务器，获取文件的网络 URL 后，再调用 ww.previewFile 来实现文件预览。

以下是具体的步骤和代码示例：

1. 将文件流上传到服务器

首先，通过接口将从后端获取到的文件流上传到服务器，生成一个可访问的文件 URL。

2. 使用 ww.previewFile 预览文件

一旦服务器返回文件的 URL，您可以调用 ww.previewFile 方法，通过该 URL 在政务微信中预览文件。

示例代码

const exportCase = async (item) => {
// 从后端获取文件流
uni.request({
url: urlJoin(
sxz.getConfig().api,
`/sxz/checkRecord/getRecordFiles?id=${item.id}&type=3`
),
header: {
Authorization:
uni.getStorageSync("token_type") + " " + uni.getStorageSync("assess_token"),
},
method: "GET",
responseType: "arraybuffer",
success: async (res) => {
if (res.statusCode === 200) {
const blob = new Blob([res.data], { type: "application/vnd.ms-word" });

// 上传 blob 数据到服务器，生成 URL
const fileUrl = await uploadBlobToServer(blob);

// 使用 ww.previewFile 在政务微信中预览文件
ww.previewFile({
url: fileUrl,
name: `${item.checkCood}.doc`,
size: res.data.byteLength, // 文件字节大小
success: () => {
console.log("文件预览成功");
},
fail: (err) => {
console.error("文件预览失败", err);
},
});
} else {
uni.showToast({
title: "下载失败",
icon: "none",
});
}
},
fail: (err) => {
console.error("网络请求失败", err);
uni.showToast({
title: "网络请求失败，请检查网络连接",
icon: "none",
});
},
});
};

// 假设 uploadBlobToServer 函数用于将 Blob 上传至服务器
async function uploadBlobToServer(blob) {
// 这里您需要实现上传逻辑，例如通过 FormData 上传 Blob
// 服务器返回的应该是一个可以在微信内访问的文件URL
const formData = new FormData();
formData.append("file", blob, "tempfile.doc");

const response = await fetch("/upload", {
method: "POST",
body: formData,
});
const result = await response.json();
return result.fileUrl; // 返回文件的外网可访问URL
}

注意事项

1. 上传到外网服务器：确保上传后的文件可以被政务微信访问，即文件的 URL 可以在微信环境中打开。
2. 文件大小：size 参数是必需的，需传入文件的字节大小，可以通过 res.data.byteLength 获取。
3. 兼容性：确认企业微信（政务微信）中的 ww.previewFile 方法的版本支持。

通过这种方法，可以在获取到后端文件流后，利用 ww.previewFile 在政务微信中实现文件的直接预览。

您好，url需要公网下可访问。 赞同 评论 8

毕美兰 2024/06/20 您好，公司内部文件是没有公网可直接访问url的，需要走接口，返回文件流，这样如何实现文件预览呢 赞同 回复

于守超 2024/08/28 内部文件是无法下载预览吗？ 赞同 回复

技术支持-九九 回复 于守超 2024/08/28 如果是有防火墙的可以看下配置ip白名单 获取企业微信接口IP段 https://developer.work.weixin.qq.com/document/path/92520 获取企业微信回调IP段 https://developer.work.weixin.qq.com/document/path/92521 赞同 回复

于守超 回复 技术支持-九九 2024/08/28 现在允许previewFile预览下载blob的文件？ 赞同 回复

技术支持-九九 回复 于守超 2024/08/28 不支持 赞同 回复

于守超 回复 技术支持-九九 2024/08/28 必须是 http或者https 开头的静态文件？createObjectURL 生成的本地临时地址是不行？ 赞同 回复

技术支持-九九 回复 于守超 2024/08/28 本地的不支持的 赞同 回复

于守超 回复 技术支持-九九 2024/08/28 ok