预览和下载 (pc和微信小程序)

1.微信小程序 预览pdf 或者 图片等

javascript 复制代码
//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 });
            }
        });
    });
}
javascript 复制代码
 //预览       
 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;
            }
        }

文件下载

javascript 复制代码
        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.浏览器预览

javascript 复制代码
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("该文件暂不支持预览~");
    }
}
相关推荐
橙序员小站31 分钟前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名3 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫3 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊3 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter3 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折4 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_4 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial4 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu4 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端
jiayu4 小时前
Angular6学习笔记13:HTTP(3)
前端