vue 预览 有token验证的 doc、docx、pdf、xlsx、csv、图片 并下载

预览 doc我也不会

//docx
<div v-if="previewType == 'docx'"  ref="iframeDom" style="border: none; width: 100%; height: 100%"></div>
import { renderAsync } from "docx-preview";
let iframeDom: any = ref();
axios({url: docURL,method: "get",timeout: 100000,responseType: "blob",headers: {token: "xxxxx",},}).then(({ data }) => {previewType.value = "docx";console.log("iframeDom", iframeDom.value);renderAsync(data, iframeDom.value);}).catch((error) => {console.log(error);});}//pdf || 图片<iframe :src="src" style="border: none; width: 100%; height: 100%" v-if="previewType == 'pdf'"><p>您的浏览器不支持 iframe 标签,请从列表中下载预览</p></iframe>previewType.value = "pdf";src.value =  docURL
previewType.value = "img";src.value =  docURL//xlsx 、csv
import LuckyExcel from 'luckyexcel'<div v-if="previewType == 'xlsx'" id="mysheet" style="margin:0px;padding:0px;width:100%;height:85vh;"></div>
previewType.value = "xlsx";LuckyExcel.transformExcelToLuckyByUrl(docURL,"", (exportJson: any, luckysheetfile: any) => {if (exportJson.sheets == null || exportJson.sheets.length == 0) {alert("文件读取失败!");return;}// 销毁原来的表格window.luckysheet.destroy();// 重新创建新表格window.luckysheet.create({container: 'mysheet', // 设定DOM容器的idshowtoolbar: false, // 是否显示工具栏showinfobar: false, // 是否显示顶部信息栏showstatisticBar: false, // 是否显示底部计数栏sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置allowEdit: false, // 是否允许前台编辑enableAddRow: false, // 是否允许增加行enableAddCol: false, // 是否允许增加列sheetFormulaBar: false, // 是否显示公式栏enableAddBackTop: false, //返回头部按钮data: exportJson.sheets, //表格内容title: exportJson.info.name //表格标题});});

下载

pdf
axios({url: downURL,method: "get",timeout: 100000,responseType: "blob",headers: {token: "xxxx",},}).then(({ data }) => {const aLink = document.createElement("a");const objectUrl = window.URL.createObjectURL(new Blob([data], { type: "application/pdf" }));document.body.appendChild(aLink);aLink.style.display = "none";aLink.href = objectUrl;aLink.download = infoData.value.fileName;aLink.click();document.body.removeChild(aLink);return});图片
var image = new Image();image.setAttribute("crossOrigin", "anonymous");image.onload = function () {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;var context: any = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);var url = canvas.toDataURL("image/png");var a = document.createElement("a");var event = new MouseEvent("click");a.download = down.value.split('.')[0] || "photo";a.href = url;a.dispatchEvent(event);};image.src = downURL;  // 指定图片的来源,这是需要我们提供的return其他文档
window.open(downURL, '_blank')

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

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

相关文章

机器学习——聚类算法一

机器学习——聚类算法一 文章目录 前言一、基于numpy实现聚类二、K-Means聚类2.1. 原理2.2. 代码实现2.3. 局限性 三、层次聚类3.1. 原理3.2. 代码实现 四、DBSCAN算法4.1. 原理4.2. 代码实现 五、区别与相同点1. 区别&#xff1a;2. 相同点&#xff1a; 总结 前言 在机器学习…

【Java】Java 内存管理最佳实践

文章目录 前言Java 应用程序内存泄漏的常见原因Java 应用程序中内存管理的最佳实践1. 使用不可变对象2. 最小化对象创建3. 使用适当的数据结构4. 正确关闭资源5.使用弱引用6.使用 EnumSet 和 EnumMap 进行枚举7. 对大型集合使用并行流8. 更新到最新的 Java 版本9.定期测试和调整…

ASCII码 对照表

总256个字符元素 0&#xff5e;255 码值整数据 字符结构 字符元素(内容) 整数结构 码值整数

怎么将pdf合并成一个?将pdf合并成一个的方法

在日常工作和学习中&#xff0c;我们经常会遇到需要将多个PDF文件合并成一个的情况。这不仅能够提高文件管理的便捷性&#xff0c;还能节省存储空间并使阅读更加流畅。那么&#xff0c;怎么将pdf合并成一个呢&#xff1f;在本文中&#xff0c;我将为您介绍几种简单实用的方法&a…

无涯教程-机器学习 - 数据可视化

在上一章中&#xff0c;无涯教程讨论了数据对于机器学习算法的重要性&#xff0c;以了解具有统计信息的数据&#xff0c;还有另一种称为可视化的方式来理解数据。 借助数据可视化&#xff0c;可以看到数据的属性保持什么样的关联&#xff0c;这是查看要素是否与输出相对应的最…

【枚举区间+线段树】CF Ehu 152 E

Problem - E - Codeforces 题意&#xff1a; 思路&#xff1a; 感觉是个套路题 对区间计数&#xff0c;按照CF惯用套路&#xff0c;枚举其中一个端点&#xff0c;对另一个端点计数 对于这道题&#xff0c;枚举右端点&#xff0c;对左端点计数 Code&#xff1a; #include &…

类和对象(中)

&#x1f493;博主个人主页:不是笨小孩&#x1f440; ⏩专栏分类:数据结构与算法&#x1f440; C&#x1f440; 刷题专栏&#x1f440; C语言&#x1f440; &#x1f69a;代码仓库:笨小孩的代码库&#x1f440; ⏩社区&#xff1a;不是笨小孩&#x1f440; &#x1f339;欢迎大…

Spring Cloud Gateway的快速使用

环境前置搭建Nacos&#xff1a;点击跳转 Spring Cloud Gateway Docs 新建gateway网关模块 pom.xml导入依赖 <!-- 网关 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifact…

React 如何获取上一次 state 的值

React 如何获取上一次 state 的值 一、用 ref 存储上一次的 state 类似 usePrevious function usePrevious(value) {const ref useRef();useEffect(() > {ref.current value;});return ref.current; }二、通过 setState 的入参改为函数获取

【ES6】Promise.race的用法

Promise.race()方法同样是将多个 Promise 实例&#xff0c;包装成一个新的 Promise 实例。 const p Promise.race([p1, p2, p3]);上面代码中&#xff0c;只要p1、p2、p3之中有一个实例率先改变状态&#xff0c;p的状态就跟着改变。那个率先改变的 Promise 实例的返回值&#…

知识图谱笔记:TransH

1 TransE存在的问题 一对多 假设有一个关系 "是父亲"&#xff0c;其中一个父亲&#xff08;头实体&#xff09;可能有多个孩子&#xff08;尾实体&#xff09; 父亲 A -> 孩子 1父亲 A -> 孩子 2在 TransE 中&#xff0c;这两个关系会被建模为&#xff1a; A是…

GPS全球卫星定位系统原理

GPS全球卫星定位系统是一种利用导航卫星进行定位、导航和时间测量的系统。它由三部分组成&#xff1a;空间部分、地面控制部分和用户设备部分。其中&#xff0c;空间部分由24颗卫星组成&#xff0c;分布在6个轨道面上&#xff0c;每个轨道面有4颗卫星&#xff1b;地面控制部分由…

CentOS 7.6环境下Nginx1.23.3下载安装配置使用教程

一、前言 这篇文章主要介绍了CentOS 7.6环境下Nginx下载安装配置使用教程&#xff0c;学习nginx的朋友可以参考一下 二、下载 使用如下命令进行下载 wget http://nginx.org/download/nginx-1.23.3.tar.gz 三、安装nginx需要的环境库 项目首先我们需要安装gcc、gcc-c、zlib、…

进程控制相关 API-创建进程、进程分离、进程退出、进程阻塞

进程控制相关 API p.s 进程控制中的状态转换 相关 API&#xff0c;用户很少用到&#xff0c;在此不提。 一般来说&#xff0c;这些内核标准 API&#xff0c;在执行出错&#xff08;可能是资源不够、权限不够等等&#xff09;会返回负值&#xff08;比如 -1&#xff09;&#…

【Qt QAxObject】使用 QAxObject 高效任意读写 Excel 表

1. 用什么操作 Excel 表 Qt 的官网库中是不包含 Microsoft Excel 的操作库&#xff0c;关于对 Microsoft Excel 的操作库可选的有很多&#xff0c;包含基于 Windows 系统本身的 ActiveX、Qt Xlsx、xlsLib、LibXL、qtXLS、BasicExcel、Number Duck。 库.xls.xlsx读写平台Qt Xls…

JVM的故事——类文件结构

类文件结构 文章目录 类文件结构一、概述二、无关性基石三、Class类文件的结构 一、概述 计算机是只认由0、1组成的二进制码的&#xff0c;不过随着发展&#xff0c;我们编写的程序可以被编译成与指令集无关、平台中立的一种格式。 二、无关性基石 对于不同平台和不同平台的…

二分图最大完美匹配

嗯 想不通就是二分之后的点&#xff0c;寻找左边的点和右边的点的保证两条边的顶点不相同的最大边数 匈牙利算法 O(mn) 左边寻找和右边相邻的边&#xff0c;如果右边还没有和左边进行连线&#xff0c;那么匹配成功。如果右边已经进行连线&#xff0c;那么考虑左边是否能更改连…

docker命令学习

docker vscode插件出现的问题 docker命令 docker images &#xff08;查看所有的镜像&#xff09; docker ps -a &#xff08;查看所有的容器&#xff09; docker ps &#xff08;查看运行的容器&#xff09; docker run imageID docker run --gpus all --shm-size8g -it imag…

网络安全体系架构介绍

网络安全体系是一项复杂的系统工程&#xff0c;需要把安全组织体系、安全技术体系和安全管理体系等手段进行有机融合&#xff0c;构建一体化的整体安全屏障。针对网络安全防护&#xff0c;美国曾提出多个网络安全体系模型和架构&#xff0c;其中比较经典的包括PDRR模型、P2DR模…

Revit SDK 介绍:AvoidObstruction 避免碰撞

前言 这个例子介绍如何让碰撞在一起的管道避免碰撞&#xff0c;即对管道进行调整。 内容 调整前&#xff1a; 调整后&#xff1a; 从结果来看&#xff0c;所有的碰撞都被调整了。作为一个例子&#xff0c;不会去考虑是否合理&#xff0c;仅仅是展示了一下 Revit API 的能…