预览和下载 (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("该文件暂不支持预览~");
    }
}
相关推荐
Hilaku22 分钟前
前端不懂业务有多可怕?
前端·javascript·程序员
涛涛ing29 分钟前
模型吐出半截JSON,前端如何边收边渲染?2026年AI应用必须闯过的工程关
前端
aixingpan31 分钟前
aixingpan.cnAPI开发文档:api_docs_trichart_natal_solar_return_transit2接口指南
前端·php
FRing031 小时前
JavaScript入门到精通二十八(forEach遍历、创建对象的三种方式、构造函数、new实例化执行过程、实例成员和静态成员)
开发语言·前端·javascript
燕落南枝1 小时前
CSS 表单选择器与伪元素选择器详解
前端·css
拖孩1 小时前
一个人 + AI 做的小程序,今天,正式回本了
前端·后端·微信小程序
进击的丸子1 小时前
APP 人脸识别增值版 SDK:Camera2 无缝接入指南
前端·前端框架·代码规范
开开心心就好1 小时前
本地文件搜索工具,双击Ctrl就能呼出搜索
java·服务器·前端·支持向量机·ffmpeg·音视频·模拟退火算法
知了清语1 小时前
SVG 缩放预览:F12 无法定位子元素 & 放大模糊
前端
AN1 小时前
一个人,带着一群 AI:一个 10 年前端如何做出几十个团队在用的在线文档
前端