在小程序开发中，文件预览功能是一个常见的需求。然而，由于不同平台对于PDF文件的兼容性问题，开发者需要针对不同的平台进行处理，以确保合同能够正常预览。本文将介绍如何实现小程序合同预览功能，并解决PDF文件在安卓和苹果手机上的兼容性问题。
代码实现：
首先，我们需要定义一个合同预览的点击事件处理函数，代码如下：
// 文件预览点击事件（支持预览 PDF + 图片）
contractPreviewClick(url) {
const fileTypeList = ["pdf"];
const fileType = url.substring(url.lastIndexOf(".") + 1);
if (fileTypeList.includes(fileType)) {
// PDF 格式文件，使用 openDocument（新开页面打开文档）接口，在安卓和苹果都能打开pdf格式
this.previewFile(url, fileType);
} else {
// 其他类型文件，则使用 web-view
this.previewWebview(url);
}
}
在这段代码中，我们首先根据文件的后缀名判断文件类型，如果是PDF文件，则使用uni.openDocument()接口在新页面中打开PDF文件；如果是其他类型文件，则使用web-view方式在小程序中打开文件。
接下来，我们需要实现具体的文件预览逻辑，代码如下：
// 文件预览
previewFile(url, fileType) {
if (url) {
uni.showLoading({
title: "正在打开文件…",
mask: true
});
uni.downloadFile({
url,
success: (res) => {
uni.hideLoading();
const filePath = res.tempFilePath;
uni.openDocument({
filePath,
fileType,
success: () => {
},
complete: () => {
uni.hideLoading();
}
});
},
fail: () => {
uni.hideLoading();
uni.showToast("文件预览失败，请重新预览");
}
});
} else {
uni.showToast("找不到文件");
}
}
// web-view方式预览
previewWebview(url) {
uni.navigateTo({
url: `/pages/webview/webview?url=${
url}`
});
}
在这段代码中，我们首先通过uni.downloadFile()下载文件，并在下载成功后使用uni.openDocument()接口打开文件。在打开文件的过程中，我们显示一个加载中的提示，并在打开成功后触发一个埋点事件。如果文件下载或打开失败，则显示一个错误提示。
兼容性处理：
由于小程序web-view在安卓和苹果手机上对于PDF文件的兼容性问题，我们需要针对不同的平台进行不同的处理。在上述代码中，我们通过判断文件类型来决定使用哪种方式打开文件，以确保PDF文件在安卓和苹果手机上都能正常预览。
总结：
通过以上代码实现，我们可以在小程序中实现文件预览功能，并解决了PDF文件在安卓和苹果手机上的兼容性问题。开发者可以根据实际需求进行修改和扩展，以满足不同场景下的合同预览需求。
注意事项：
在编写代码时，需要注意不要涉及到政治敏感问题和黄赌毒内容，以确保代码的合法性和安全性。
参考链接：