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

embedded/2024/12/29 23:18:09/

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.ppmy.cn/embedded/148800.html

相关文章

关于小程序内嵌h5打开新的小程序

关于小程序内嵌h5打开新的小程序 三种方式 https://juejin.cn/post/7055551463489011749 只依赖于h5本身的就是 https://huaweicloud.csdn.net/64f97ebb6b896f66024ca16c.html https://juejin.cn/post/7055551463489011749 navigateToMiniProgram 故小程序webview里的h5无法…

[Unity Shader]【图形渲染】 数学基础10 - 旋转矩阵

在计算机图形学和着色器开发中,旋转矩阵是处理物体旋转操作的核心工具之一。旋转操作是三维变换中相对复杂的一部分,主要通过线性代数中的矩阵运算实现。本篇文章将系统介绍三种围绕坐标轴的旋转矩阵的定义和性质。 1. 什么是旋转矩阵? 旋转矩阵是用于将点绕某个轴旋转一定…

云手机与Temu矩阵:跨境电商运营新引擎

云手机与 Temu 矩阵结合的基础 云手机技术原理 云手机基于先进的 ARM 虚拟化技术,在服务器端运行 APP。通过在服务器上利用容器虚拟化软件技术,能够虚拟出多个独立的手机操作系统实例,每个实例等同于一部单独的手机,可独立运行各…

Saprk和Flink的区别

1 、设计理念方面 Spark 的技术理念是使用微批来模拟流的计算,基于 Micro-batch ,数据流以时间为单位被切分为一个个 批次,通过分布式数据集RDD 进行批量处理,是一种伪实时。 Flink 是基于事件驱动的,是面向流的处理…

Flink 的并行度配置低于Kafka 分区数会出现的问题

在 Flink 中使用 Kafka 数据源时,设置的 Kafka 分区数 和 Flink 的并行度 会直接影响数据的处理方式。如果你的 Kafka 分区数大于 Flink 的并行度,可能会引发以下问题: 1. Kafka 分区与 Flink 任务不匹配 Flink 在读取 Kafka 数据时&#xf…

Redis热点数据管理全解析:从MySQL同步到高效缓存的完整解决方案

1. 引言 1.1 背景介绍:MySQL与Redis在高性能场景下的结合 在现代互联网应用中,MySQL作为关系型数据库,承担了大量业务数据的存储任务。然而,随着业务的增长,海量数据的查询性能成为一个瓶颈。为了应对高并发和低延迟…

OpenMV与STM32通信全面指南

目录 引言 一、OpenMV和STM32简介 1.1 OpenMV简介 1.2 STM32简介 二、通信协议概述 三、硬件连接 3.1 硬件准备 3.2 引脚连接 四、软件环境搭建 4.1 OpenMV IDE安装 4.2 STM32开发环境 五、UART通信实现 5.1 OpenMV端编程 5.2 STM32端编程 六、SPI通信实现 6.1…

Partition Strategies kafka分区策略

原文链接 Kafka Partition Strategy 分区策略简介 分区增加了并行化并允许Kafka扩展。存在许多将消息分发到主题分区的策略。在我们深入研究每种策略的背景之前,下面的表格给出了每种策略的简要概述。 Kafka消息由生产者发送,由消费者接收。这两种策略…