预览和下载 (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("该文件暂不支持预览~");
    }
}
相关推荐
泷羽Sec-静安43 分钟前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
小时前端1 小时前
虚拟DOM已死?90%内存节省的Vapor模式正在颠覆前端
前端·html
Keepreal4961 小时前
Web Components简介及如何使用
前端·javascript·html
jump6801 小时前
TS中 unknown 和 any 的区别
前端
无羡仙1 小时前
AI终于‘看见’网页了!Stagewise让UI修改从‘盲调’变‘指哪打哪
前端
柯腾啊2 小时前
“Script error.”的产生原因和解决办法
前端·javascript·浏览器
沙漠之皇2 小时前
ts 定义重复对象字段
前端
HashTang3 小时前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李3 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡3 小时前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html