当前位置: 首页 > news >正文

在vue中,根据后端接口返回的文件流实现word文件弹窗预览

需求

弹窗预览word文件,因浏览器无法直接根据blob路径直接预览word文件,所以需要利用插件实现。

解决方案

利用docx-preview实现word文件弹窗预览,以node版本16.21.3和docx-preview版本0.1.8为例

具体实现步骤

1、安装docx-preview插件

npm install docx-preview@0.1.8 --save

2、创建弹窗组件,给一个空div绑定id为container

	<!-- 预览弹窗 --><div class="previewDialog"><el-dialog:visible.sync="dialogVisible"width="90%":fullscreen="dialogFullScreen"><div slot="title" class="dialog-header-title"><div class="title-text">文件预览</div></div><div id="container" style="width: 100%;"></div></el-dialog></div>

3、引入docx-preview和axios

import { renderAsync } from "docx-preview";

4、在data中初始化定义docxOptions配置项

data() {return {docxOptions: {className: "docx", // string:默认和文档样式类的类名/前缀inWrapper: true, // boolean:启用围绕文档内容的包装器渲染ignoreWidth: false, // boolean:禁用页面的渲染宽度ignoreHeight: false, // boolean:禁止渲染页面高度ignoreFonts: false, // boolean:禁用字体渲染breakPages: true, // boolean:在分页符上启用分页ignoreLastRenderedPageBreak: true, // boolean:在lastRenderedPageBreak 元素上禁用分页experimental: false, // boolean:启用实验功能(制表符停止计算)trimXmlDeclaration: true, // boolean:如果为true,解析前会从​​ xmlTemplate 文档中移除 xmlTemplate 声明// useBase64URL: false, // boolean:如果为true,图片、字体等会转为base 64 URL,否则使用URL.createObjectURL// useMathMLPolyfill: false, // boolean:包括用于 chrome、edge 等的 MathML polyfill。// showChanges: false, // boolean:启用文档更改的实验性渲染(插入/删除)debug: false // boolean:启用额外的日志记录},dialogVisible: false,};},

5、创建预览方法previewFile

	// 预览文件previewFile() {let timeId = "";document.getElementById("container") &&(document.getElementById("container").innerHTML = "");const options = {method: "get",headers: {Authorization: getToken()},url:process.env.VUE_APP_BASE_SERVER + `/stgFile/downloadFile/${timeId}`, // 可替换为你自己的后端下载地址responseType: "blob", // 二进制流params: {}};this.dialogVisible = true;axios(options).then(res => {if (!res.data) return this.$message.warning("当前没有可预览文件");const docData = new Blob([res.data]);let bodyContainer = document.getElementById("container");renderAsync(docData, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型bodyContainer, // HTMLElement 渲染文档内容的元素,null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null,则将使用 bodyContainer。this.docxOptions // 配置);}).catch(err => {return this.$message.error(err);});},

5、在所需地方调用预览方法

 <el-button primary class="file-preview" @click="previewFile">文件预览 <i class="el-icon-view"></i></el-button>

备注

以上则是预览word文件流的全部内容,有的同学在使用过程中可能会遇到安装docx-preview插件报错或者线上部署时报错,这个很大概率是因为你自己工程用到的node版本与docx-preview版本匹配不一致导致,可以去docx-preview官网查看对应版本,建议node16及以下版本尽量使用老一点的版本,16以上版本使用最新的docx-preview即可。不同版本的docx-preview使用方式有细微差异,可以查看官网各个版本的实例方法进行调试。

docx-preview官网地址:https://www.npmjs.com/package/docx-preview

相关文章:

在vue中,根据后端接口返回的文件流实现word文件弹窗预览

需求 弹窗预览word文件&#xff0c;因浏览器无法直接根据blob路径直接预览word文件&#xff0c;所以需要利用插件实现。 解决方案 利用docx-preview实现word文件弹窗预览&#xff0c;以node版本16.21.3和docx-preview版本0.1.8为例 具体实现步骤 1、安装docx-preview插件 …...

基于Spring Boot的同城宠物照看系统的设计与实现

摘 要 科学技术日新月异&#xff0c;人们的生活都发生了翻天覆地的变化&#xff0c;同城宠物照看系统当然也不例外。过去的信息管理都使用传统的方式实行&#xff0c;既花费了时间&#xff0c;又浪费了精力。在信息如此发达的今天&#xff0c;我们可以通过网络这个媒介&#x…...

Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作(三)

Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作&#xff08;三&#xff09; py2neo 删除 1、连接数据库 from py2neo import Graph graph Graph("bolt://xx.xx.xx.xx:7687", auth(user, pwd), nameneo4j)2、删除节点 # 删除单个节点 node graph.node…...

二分基本实现

模板 一般题目看到&#xff0c;最大&#xff0c;最小时优先考虑二分 //将区间分为 [l,mid-1] int erfen1(int l,int r) {while(l<r){int mid(lr1)/2;if(check())lmid;elsermid-1;}return l; }//将区间分为 [mid1,r] int erfen2(int l,int r) {while(l<r){int mid(lr)/2…...

数据结构中的随机抽取和顺序存取

在数据结构领域&#xff0c;随机存取与顺序存取是两种基本的存储模式。这两种模式在很大程度上决定了数据的组织与访问方式&#xff0c;从而对数据处理效率和存储空间的利用效果产生重要影响。本文将进一步探讨这两种存储模式的特点及其差异。 随机存取 随机存取&#xff0c;…...

大数据新视界 -- 大数据大厂之 Impala 性能优化:跨数据中心环境下的挑战与对策(上)(27 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

GPT中转站技术架构

本文介绍阿波罗AI中转站&#xff08;https://api.ablai.top/&#xff09;的技术架构&#xff0c;该中转API的技术架构采用了分布式架构、智能调度和API中转等技术&#xff0c;确保了全球范围内的高效访问和稳定运行。以下是对该技术架构的详细分析&#xff1a; 分布式架构 分…...

忽然就卷起来的AI Coding 赛道

忽然就卷起来的AI Coding 赛道 原创 松子 松子聊数据 2024年11月22日 17:03 2023年&#xff0c;大模型的爆发让整个行业经历了一场“拼尽一切”的竞赛——拼算力、拼参数、拼语料&#xff0c;再到今天开始拼智能体。 每一步都是技术的跃迁&#xff0c;也让市场竞争愈发白热化…...

十大网络安全事件

一、私有云平台遭攻击&#xff0c;美国数千家公司工资难以发放 1月&#xff0c;专门提供劳动力与人力资本管理解决方案的美国克罗诺斯&#xff08;Kronos&#xff09;公司私有云平台遭勒索软件攻击&#xff0c;事件造成的混乱在数百万人中蔓延。 克罗诺斯母公司UKG集团&#xf…...

1+X应急响应(网络)病毒与木马的处置:

病毒与木马的处置&#xff1a; 病毒与木马的简介&#xff1a; 病毒和木马的排查与恢复&#xff1a;...

nohup java -jar supporterSys.jar --spring.profiles.active=prod

文章目录 1、ps -ef | grep java2、kill 13713、ps -ef | grep java4、nohup java -jar supporterSys.jar --spring.profiles.activeprod &5、ps -ef | grep java1. 启动方式进程 1371进程 19994 2. 主要区别3. 可能的原因4. 建议 1、ps -ef | grep java rootshipper:~# p…...

二进制 分析工具:Radare2、r2frida、Binutils、file、string、as、nm、ldd、objdump、readelf、strip

1、二进制 分析工具 工欲善其事&#xff0c;必先利其器&#xff0c;在二进制安全的学习中&#xff0c;​使用工具尤为重要。遇到一个不熟悉的文件时&#xff0c; 首先要确定 "这是什么类型的文件"&#xff0c;回答这个问题的首要原则是&#xff0c;绝不要根据文件的扩…...

【Linux】基本指令

一、基本指令 1、pwd 语法&#xff1a;pwd 功能&#xff1a;显示用户当前所在的目录。 2.ls 语法&#xff1a;ls [命令行选项][目录或文件](对于选项可以是0个或多个) 功能&#xff1a;对于目录&#xff0c;该命令该目录下的目录和文件。对于文件&#xff0c;将列出文件名…...

Failed to start Docker Application Container Engine

说明&#xff1a; 1&#xff09;访问应用业务&#xff0c;读取不到数据&#xff0c;show databases;查看数据库报错 2&#xff09;重启docker服务&#xff0c;服务启动失败&#xff0c;查看日志报错如下图所示 3&#xff09;报错信息&#xff1a;chmod /data/docker: read-only…...

043 商品详情

文章目录 详情页数据表结构voSkuItemVo.javaSkuItemSaleAttrVo.javaAttrValueAndSkuIdVo.javaSpuAttrGroupVo.javaGroupAttrParamVo.java pom.xmlSkuSaleAttrValueDao.xmlSkuSaleAttrValueDao.javaAttrGroupDao.xmlAttrGroupServiceImpl.javaSkuInfoServiceImpl.javaSkuSaleAtt…...

股指期货的套保策略如何精准选择和规避风险?

在金融市场中&#xff0c;股指期货作为一种重要的风险管理工具&#xff0c;常被投资者用来规避投资风险。其原理在于&#xff0c;股指期货与现货股指的走势高度相关&#xff0c;因此可以通过在期货市场上建立与现货头寸相反的头寸&#xff0c;来对冲掉现货市场的价格波动风险。…...

基于物联网设计的人工淡水湖养殖系统(华为云IOT)_253

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】设计意义【5】国内外研究现状【6】摘要1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发1.5 参考文献1.6 系统框架图1.7 系统原理图1.8 实物图1.9…...

【动手学深度学习Pytorch】4. 神经网络基础

模型构造 回顾一下感知机。 nn.Sequential()&#xff1a;定义了一种特殊的module。 torch.rand()&#xff1a;用于生成具有均匀分布的随机数&#xff0c;这些随机数的范围在[0, 1)之间。它接受一个形状参数&#xff08;shape&#xff09;&#xff0c;返回一个指定形状的张量&am…...

python高阶技巧一

闭包 简单认识一下闭包 以下代码&#xff0c;内层inner函数不仅依赖于自身的参数b&#xff0c;还依赖于外层outer函数的参数a。inner就是一个闭包函数&#xff0c;既能访问外部变量&#xff0c;又保证外部变量不是全局的&#xff0c;不会被篡改掉&#xff0c;确保了外部变量的…...

智慧环保生态文明信息化解决方案

1. 生态文明建设背景 随着国家对生态文明建设的重视&#xff0c;一系列政策文件相继出台&#xff0c;将生态文明建设纳入国家发展总体布局&#xff0c;加大资源消耗、环境保护等指标权重&#xff0c;推动生态文明体制改革。 2. 智慧环保的定义与发展 智慧环保作为数字环保的…...

【Linux】权限

&#x1f33b;个人主页&#xff1a;路飞雪吖~ &#x1f320;专栏&#xff1a;Linux 目录 ⭐Linux权限的概念 &#x1f31f;权限管理 <1>文件访问者的分类 <2>文件类型和访问权限 <3>文件权限值的表示方法 <4>文件访问权限的相关设置方法 ✨chmod…...

docker 部署 kvm 图形化管理工具 WebVirtMgr

镜像构建 官方最后一次更新已经是 2015年6月22日 了&#xff0c;官方也没有 docker 镜像&#xff0c;这边选择咱们自己构建如果你的服务器有魔法&#xff0c;可以直接 git clone 一下 webvirtmgr 的包&#xff0c;没有的话&#xff0c;可以和我一样&#xff0c;提前从 github 上…...

Next.js- 链接和导航

#题引&#xff1a;我认为跟着官方文档学习不会走歪路 在介绍路由导航之前先了解下客户端组件和服务端组件 服务端组件&#xff08;Server Components&#xff09; &#xff08;1&#xff09; 渲染方式&#xff1a; 在服务器上渲染&#xff0c;生成 HTML 后发送到客户端。适…...

主机管理工具 WGCLOUD v3.5.6 更新了哪些特性

WGCLOUD-v3.5.6 更新说明&#xff0c;2024-11-20发布 1. 新增&#xff0c;个性化采集&#xff0c;查看 2. 新增&#xff0c;支持达梦数据库做数据源来存贮监控数据&#xff0c;查看说明(8) 3. 新增&#xff0c;日志监控支持配置自动处理指令&#xff0c;当发现日志出现告警关键…...

空间数据存储格式GeoJSON

GeoJSON 是一种用于表示地理信息的开放标准格式&#xff0c;广泛用于存储和交换地理空间数据。它基于 JSON 格式&#xff0c;因此易于理解和处理&#xff0c;尤其适用于 Web 和 JavaScript 环境中的地图应用。GeoJSON 支持多种地理信息类型&#xff0c;如点、线、面、坐标系统等…...

【SQL Server】华中农业大学空间数据库实验报告 实验九 触发器

1.实验目的 通过实验课程与理论课的学习深入理解掌握的触发器的原理、创建、修改、删除、基本的使用方法、主要用途&#xff0c;并且可以在练习的基础上&#xff0c;熟练使用触发器来进行数据库的应用程序的设计&#xff1b;深入学习深刻理解与触发器相关的T-SQL语句的编写的基…...

Linux 中的 zoxide 命令详解与示例

文章目录 Linux 中的 zoxide 命令详解与示例zoxide 简介安装 zoxide使用包管理器Ubuntu/DebianArch LinuxFedoramacOS&#xff08;Homebrew&#xff09;Windows&#xff08;Scoop&#xff09; 使用脚本安装&#xff08;linux、Centos&#xff09;安装流程 集成到 ShellBashZshF…...

Etcd 框架

基本了解 客户端、长连接与租约的关系 客户端对象 etcd的客户端对象是用户与etcd服务进行交互的主要接口&#xff0c;主要功能就是存储、通知和事务等功能访问 键值存储&#xff1a;客户端通过put 和 get操作存储数据&#xff1b;数据存储在etcd的层级化键值数据库中监听器&a…...

在 CentOS 7 上安装 MinIO 的步骤

在 CentOS 7 上安装 MinIO 的步骤 在 CentOS 7 上安装 MinIO 的步骤1. 更新系统2. 安装依赖3. 下载 MinIO4. 赋予执行权限5. 移动 MinIO 到系统路径6. 创建 MinIO 用户7. 创建数据目录8. 创建 MinIO 服务文件9. 启动 MinIO 服务10. 设置开机自启11. 访问 MinIO12. 配置防火墙&a…...

【Linux】进程地址空间

目录 一、引入问题&#xff1a; 二、进程地址空间&#xff1a; 地址和数据总线&#xff1a; 三、页表&#xff1a; 权限&#xff1a; 缺页中断&#xff1a; 四、回到问题&#xff1a; 五、总结&#xff1a; 重新理解进程&#xff1a; 一、引入问题&#xff1a; 在C中&a…...

快速图像识别:落叶植物叶片分类

1.背景意义 研究背景与意义 随着全球生态环境的变化&#xff0c;植物的多样性及其在生态系统中的重要性日益受到关注。植物叶片的分类不仅是植物学研究的基础&#xff0c;也是生态监测、农业管理和生物多样性保护的重要环节。传统的植物分类方法依赖于人工观察和专家知识&…...

第 22 章 - Go语言 测试与基准测试

在Go语言中&#xff0c;测试是一个非常重要的部分&#xff0c;它帮助开发者确保代码的正确性、性能以及可维护性。Go语言提供了一套标准的测试工具&#xff0c;这些工具可以帮助开发者编写单元测试、表达式测试&#xff08;通常也是指单元测试中的断言&#xff09;、基准测试等…...

K8S + Jenkins 做CICD

前言 这里会做整体CICD的思路和流程的介绍&#xff0c;会给出核心的Jenkins pipeline脚本&#xff0c;最后会演示一下 实验/实操 结果 由于整体内容较多&#xff0c;所以不打算在这里做每一步的详细演示 - 本文仅作自己的实操记录和日后回顾用 要看保姆式教学的可以划走了&…...

http/https

1、http与https HTTPHTTPS信息明文传输加入ssl加密传输协议&#xff0c;可以使得报文加密传输默认端口80默认端口443连接简单TCP三次握手通信TCP三次握手后还要SSL/TLS握手过程&#xff0c;才可以加密报文传输无状态不安全需要到CA申请证书&#xff0c;身份认证&#xff0c;自…...

腾讯云 AI 代码助手:产品研发过程的思考和方法论

一、文章摘要 本文将详细阐述 腾讯云 AI 代码助手的历史发展形态与产品整体架构&#xff0c;并从技术、研发方法论的角度分别阐述了产品的研发过程。 全文阅读约 5&#xff5e;8 分钟。 二、产品布局 AI 代码助手产品经历了三个时代的发展 第一代诸如 Eclipse、Jetbrains、V…...

淘宝商品评论爬虫:Java实现指南

在当今的互联网时代&#xff0c;数据的价值日益凸显&#xff0c;尤其是用户生成的内容&#xff0c;如商品评论&#xff0c;对于理解消费者行为和市场趋势具有重要意义。淘宝作为中国最大的电商平台之一&#xff0c;拥有海量的商品评论数据。本文将介绍如何使用Java编写一个简单…...

银河麒麟v10 x86架构二进制方式kubeadm+docker+cri-docker搭建k8s集群(证书有效期100年) —— 筑梦之路

环境说明 master&#xff1a;192.168.100.100 node: 192.168.100.101 kubeadm 1.31.2 &#xff08;自编译二进制文件&#xff0c;证书有效期100年&#xff09; 银河麒麟v10 sp2 x86架构 内核版本&#xff1a;5.4.x 编译安装 cgroup v2启用 docker版本&#xff1a;27.x …...

【Linux】详解shell代码实现(上)

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 学校开始搞蓝桥的校选…...

Ruby 模块(Module)

Ruby 模块&#xff08;Module&#xff09; 概述 Ruby 是一种动态、开放源代码的编程语言&#xff0c;以其简洁明了的语法和强大的功能而闻名。在 Ruby 中&#xff0c;模块&#xff08;Module&#xff09;是一个重要的概念&#xff0c;它用于封装一组相关的方法和常量。模块提…...

成都睿明智科技有限公司怎么样可靠不?

在这个日新月异的数字时代&#xff0c;电商行业如同一股不可阻挡的洪流&#xff0c;席卷着每一个消费者的生活。而抖音&#xff0c;作为短视频与电商完美融合的典范&#xff0c;更是为无数商家开辟了一片全新的蓝海。在这片充满机遇与挑战的海洋中&#xff0c;成都睿明智科技有…...

内网安全隧道搭建-ngrok-frp-nps-sapp

1.ngrok 建立内网主机与公网跳板机的连接&#xff1a; 内网主机为客户机&#xff1a; 下载客户端执行 2.frp &#xff08;1&#xff09;以下为内网穿透端口转发 frp服务端配置&#xff1a; bindPort 为frp运行端口 服务端运行 ./frps -c frps.ini frp客户端配置&#xf…...

k8s 对外服务之 Ingress

LB ingress //Ingress 简介 service的作用体现在两个方面&#xff0c;对集群内部&#xff0c;它不断跟踪pod的变化&#xff0c;更新endpoint中对应pod的对象&#xff0c;提供了ip不断变化的pod的服务发现机制&#xff1b;对集群外部&#xff0c;他类似负载均衡器&#xff0c;…...

前端速通(JavaScript)

1 初识JavaScript 1 JavaScript是什么 JavaScript 是一种高层的、轻量级的、解释型的编程语言&#xff0c;最初由 Netscape 公司于 1995 年开发。它的特点包括&#xff1a; 动态性&#xff1a;JavaScript是动态类型语言&#xff0c;允许开发者灵活地操作数据。跨平台&#xf…...

Unity图形学之着色器之间传递参数

1.初始化 struct&#xff1a; UNITY_INITIALIZE_OUTPUT&#xff08;type,name&#xff09; Type: struct 名字 Name :变量的名字 struct Input{float2 uv_MainTex;float3 myColor;};half _Glossiness;half _Metallic;fixed4 _Color;void MyVertx(inout appdata_base v,out I…...

JavaScript中的this指向问题

JavaScript中的this指向问题 1.1 为什么需要this? 为什么需要this? 在常见的编程语言中&#xff0c;几乎都有this这个关键字&#xff08;Objective-C中使用的是self),但是在JavaScript中的this和常见的面向对象语言中的this不太一样 常见面向对象的编程语言中&#xff0c;比…...

Qt之QWidget相关

Qt概述 Qt 是一个跨平台的 C 开发框架。 跨平台支持&#xff1a;可以用于开发 Windows、macOS、Linux、Android、iOS 等多种操作系统下的应用程序。这意味着开发者使用 Qt 编写的代码&#xff0c;在经过适当的编译和配置后&#xff0c;能够在不同平台上运行&#xff0c;减少了…...

Ease Monitor 会把基础层,中间件层的监控数据和服务的监控数据打通,从总体的视角提供监控分析

1. 产品定位 Ease Monitor 有如下的产品定位&#xff1a; 关注于整体应用的SLA。 主要从为用户服务的 API 来监控整个系统。 关联指标聚合。 把有关联的系统及其指示聚合展示。主要是三层系统数据&#xff1a;基础层、平台中间件层和应用层。 快速故障定位。 对于现有的系统…...

苹果MacOS 调用自编译opencv的Dylib显示一个图片程序的步骤

前言 为了测试自编译的opencv库是否能在苹果MacOS系统下使用&#xff0c;需要写一个简单的测试程序。这个测试程序写起来不难&#xff0c;麻烦的是一些配置。网上的办法很多&#xff0c;里面因为版本的问题有一些坑。特此写了一个建立步骤&#xff0c;供大家参考。 1、新建一个…...

网页中调用系统的EXE文件,如打开QQ

遇到一个实际的问题&#xff0c;需要在网页中打开本地的某个工业软件。 通过点击exe文件就可以调用到程序。 比如双击qq的exe就可以启动qq的程序。 那么问题就变成了如何加载exe程序呢&#xff1f; 可以通过Java的 Process process Runtime.getRuntime().exec(command);通过…...

在 Ubuntu 系统上安装 npm 环境以及 nvm(Node Version Manager)

在 Ubuntu 系统上安装 npm 环境以及 nvm&#xff08;Node Version Manager&#xff09; 步骤 1: 更新系统包步骤 2: 安装 nvm步骤 3: 安装 Node.js 和 npm步骤 4: 设置默认 Node.js 版本&#xff08;可选&#xff09;总结 在 Ubuntu 系统上安装 npm 环境以及 nvm&#xff08;No…...