预览和下载 (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("该文件暂不支持预览~");
    }
}
相关推荐
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
excel11 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风15 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix15 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780015 小时前
new、原型和原型链浅析
前端·javascript