预览和下载 (pc和微信小程序)
1.微信小程序 预览pdf 或者 图片等
//utils.js 文件
//通过接口返回文件链接 打开文档
export default function previewFile({ downLinkUrl, tempFilePath }) {
let url = "https://" + downLinkUrl.replace("http://", "").replace("https://", "");
return new Promise((resolve, reject) => {
wx.downloadFile({
url: url,
success(res) {
//保存到本地
wx.saveFile({
tempFilePath: res.tempFilePath,
success(res) {
const savedFilePath = res.savedFilePath;
// 打开文件
wx.openDocument({
filePath: savedFilePath,
showMenu: true,
success(res) {
resolve({ code: 200, msg: "打开文档成功", data: { savedFilePath } });
},
fail(err) {
reject({ code: 500, msg: "打开文件失败", data: err });
}
});
},
fail(err) {
reject({ code: 500, msg: "保存文件失败", data: err });
}
});
},
fail(err) {
reject({ code: 500, msg: "下载文件失败", data: err });
}
});
});
}
//预览
previewFile(item) {
//图片类型
const isImageType = [".png", ".jpe", ".jpeg", ".jpg", ".gif"];
const fileSuffix = item.fileName.substring(item.fileName.lastIndexOf("."));
//如果是图片
if (isImageType.includes(fileSuffix)) {
wx.previewImage({
showmenu: true,
urls: [item.downLinkUrl], // 需要预览的图片 http 链接列表
success() {
console.log("打开图片成功");
},
fail(err) {
console.log(err);
uni.$u.toast("打开图片失败");
}
});
} else {
uni.showLoading();
//如果有临时文件路径
if (item.tempFilePath) {
// 打开文件
wx.openDocument({
filePath: item.tempFilePath,
showMenu: true,
success(res) {
uni.$u.toast("打开文档成功");
},
fail(err) {
uni.$u.toast("预览失败请稍后重试");
}
});
} else {
previewFile(item)
.then(res => {
let { savedFilePath } = res.data;
item.tempFilePath = savedFilePath;
uni.$u.toast(res.msg);
})
.catch(err => {
uni.$u.toast(err.msg);
})
.finally(() => {
// uni.hideLoading();
});
}
}
},
//判断是否显示预览按钮
isPreviewFileType(fileName) {
const fileSuffix = fileName.substring(fileName.lastIndexOf("."));
const isPreviewFileType = [
".png",
".jpe",
".jpeg",
".jpg",
".gif",
".pdf",
".PDF",
".doc",
".docx",
".dot",
".xlc",
".xlm",
".xls",
".xlt",
".xlw",
".xlsx"
];
if (isPreviewFileType.includes(fileSuffix)) {
return true;
} else {
return false;
}
}
文件下载
downLoadFile(item) {
if (item.downLoading) return;
item.downLoading = true;
const linkUrl = item.downLinkUrl.replace(/^http:\/\//, "https://");
uni.downloadFile({
url: linkUrl,
success: res => {
item.downTempFilePath = res.tempFilePath;
this.onExport(item);
},
fail: err => {
console.log("err----", err);
this.$u.toast("下载失败,请检查您的网络");
},
complete: function() {
setTimeout(() => {
item.downLoading = false;
}, 0);
}
});
},
2.浏览器预览
export function previewHandle(params) {
//新开页面-预览文件
let url = params.downLinkUrl,
fileName = params.fileName;
const fileSuffix = fileName.substring(fileName.lastIndexOf("."));
if (isPreviewFileType.includes(fileSuffix)) {
const previewUrl = `http://dcsapi.com/?k=57170800621178060806081&url=${encodeURIComponent(
url
)}&watermark=千里马招标网`;
window.open(previewUrl);
} else {
alert("该文件暂不支持预览~");
}
}