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

news2024/12/25 21:20:07

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("该文件暂不支持预览~");
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2265475.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【双指针算法】--复写零(Java版)

文章目录 1. 题目2. 题目解析3. 代码 1. 题目 在线oj 给你一个长度固定的整数数组 arr ,请你将该数组中出现的每个零都复写一遍,并将其余的元素向右平移。 注意:请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上述修改&a…

联合目标检测与图像分类提升数据不平衡场景下的准确率

联合目标检测与图像分类提升数据不平衡场景下的准确率 在一些数据不平衡的场景下,使用单一的目标检测模型很难达到99%的准确率。为了优化这一问题,适当将其拆解为目标检测模型和图像分类模型的组合,可以更有效地控制最终效果,尤其…

HDR视频技术之十:MPEG 及 VCEG 的 HDR 编码优化

与传统标准动态范围( SDR)视频相比,高动态范围( HDR)视频由于比特深度的增加提供了更加丰富的亮区细节和暗区细节。最新的显示技术通过清晰地再现 HDR 视频内容使得为用户提供身临其境的观看体验成为可能。面对目前日益…

LabVIEW声音信号处理系统

开发了一种基于LabVIEW的声音信号处理系统,通过集成的信号采集与分析一体化解决方案,提升电子信息领域教学与研究的质量。系统利用LabVIEW图形化编程环境和硬件如USB数据采集卡及声音传感器,实现了从声音信号的采集到频谱分析的全过程。 项目…

OpenCL(壹):了解OpenCL模型到编写第一个CL内核程序

目录 1.前言 2.简单了解OpenCL 3.为什么要使用OpenCL 4.OpenCL架构 5.OpenCL中的平台模型(Platform Model) 6.OpenCL中的内存模型(Execution Model) 7.OpenCL中的执行模型(Memory Model) 8.OpenCL中的编程模型(Programmin Model) 9.OpenCL中的同步机制 10.编写第一个OpenCL程序…

Flutter组件————Scaffold

Scaffold Scaffold 是一个基础的可视化界面结构组件,它实现了基本的Material Design布局结构。使用 Scaffold 可以快速地搭建起包含应用栏(AppBar)、内容区域(body)、抽屉菜单(Drawer)、底部导…

【数据结构】数据结构整体大纲

数据结构用来干什么的?很简单,存数据用的。 (这篇文章仅介绍数据结构的大纲,详细讲解放在后面的每一个章节中,逐个击破) 那为什么不直接使用数组、集合来存储呢 ——> 如果有成千上亿条数据呢&#xff…

搭建Elastic search群集

一、实验环境 二、实验步骤 Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎Elasticsearch目录文件: /etc/elasticsearch/elasticsearch.yml#配置文件 /etc/elasticsearch/jvm.options#java虚拟机 /etc/init.d/elasticsearch#服务启动脚本 /e…

链原生 Web3 AI 网络 Chainbase 推出 AVS 主网, 拓展 EigenLayer AVS 场景

在 12 月 4 日,链原生的 Web3 AI 数据网络 Chainbase 正式启动了 Chainbase AVS 主网,同时发布了首批 20 个 AVS 节点运营商名单。Chainbase AVS 是 EigenLayer AVS 中首个以数据智能为应用导向的主网 AVS,其采用四层网络架构,其中…

玩转OCR | 探索腾讯云智能结构化识别新境界

📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 玩转OCR 腾讯云智能结构化识别产品介绍服务应用产品特征行业案例总结 腾讯云智能结构化识别 腾讯云智能结构化OCR产品分为基础版与高级版&am…

生信软件开发2 - 使用PyQt5开发一个简易GUI程序

往期文章: 生信软件开发1 - 设计一个简单的Windwos风格的GUI报告软件 1. 使用PyQt5设计一个计算器主程序 要求PyQt5 > 5.6, calculator.py与MainWindow.py处于同一目录,下载mainwindow-weird.ui和mainwindow.ui资源,运行calculator.py即…

“计算几何”简介

计算几何(Computational Geometry)简单来说就是用计算机解决几何问题。 Computational指“using or connected with computers使用计算机的;与计算机有关的”,Geometry指“the branch of mathematics that deals with the measur…

TowardsDataScience 博客中文翻译 2018~2024(一百二十三)

TowardsDataScience 博客中文翻译 2018~2024(一百二十三) 引言 从 2018 年到 2024 年,数据科学的进展超越了许多技术领域的速度。Towards Data Science 博客依然是这个领域的关键平台,记录了从基础工具到前沿技术的多方面发展。…

GitHub 桌面版配置 |可视化界面进行上传到远程仓库 | gitLab 配置【把密码存在本地服务器】

🥇 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 🎉 声明: 作为全网 AI 领域 干货最多的博主之一,❤️ 不负光阴不负卿 ❤️ 文章目录 桌面版安装包下载clone 仓库操作如下GitLab 配置不再重复输入账户和密码的两个方…

今天最新早上好问候语精选大全,每天问候,相互牵挂,彼此祝福

1、朋友相伴,友谊真诚永不变!彼此扶持绿树荫,共度快乐雨后天!一同分享的表情,愿我们友情长存,一生相伴永相连! 2、人生几十年,苦累伴酸甜,风华不再茂,雄心非当…

Verdi -- 打开Consol,创建和执行tcl命令举例

1.Verdi打开Console的步骤: For ref: 2创建tcl脚本. tcl脚本路径: 在Makefile下,与.v文件在同一个目录8_demo这个文件夹下。 font.tcl代码内容: verdiSetFont -monoFont "Courier" -monoFontSize "24" 作用…

基于java博网即时通讯软件的设计与实现【源码+文档+部署讲解】

目 录 1. 绪 论 1.1. 开发背景 1.2. 开发意义 2. 系统设计相关技术 2.1 Java语言 2.2 MySQL数据库 2.3 Socket 3. 系统需求分析 3.1 可行性分析 3.2 需求分析 3.3 系统流程图 3.4 非功能性需求 4. 系统设计 4.1 系统功能结构 4.2 数据库设计 5. 系统实现 5.…

视频汇聚融合云平台Liveweb一站式解决视频资源管理痛点

随着5G技术的广泛应用,各领域都在通信技术加持下通过海量终端设备收集了大量视频、图像等物联网数据,并通过人工智能、大数据、视频监控等技术方式来让我们的世界更安全、更高效。然而,随着数字化建设和生产经营管理活动的长期开展&#xff0…

Hadoop集群(HDFS集群、YARN集群、MapReduce​计算框架)

一、 简介 Hadoop主要在分布式环境下集群机器,获取海量数据的处理能力,实现分布式集群下的大数据存储和计算。 其中三大核心组件: HDFS存储分布式文件存储、YARN分布式资源管理、MapReduce分布式计算。 二、工作原理 2.1 HDFS集群 Web访问地址&…

文本的AIGC率检测原理

背景 你可能在学生群里或者视频中看过这样的消息:“我们学校要求论文AI率不能超过30%!”、“你们学校查AI率吗?”之类的,这些消息到底是真是假? 随着人工智能的快速发展和广泛应用,不论是工作中还是学生学…