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

vue 文件预览(docx、.xlsx、pdf)

1.ifream

<iframe src="" ></iframe> 

注: src里面是文件地址

2.vue-office

     支持vue2和vue3提供docx、.xlsx、pdf多种文档的在线预览方案

    2.1安装

#docx文档预览组件
npm install @vue-office/docx vue-demi#excel文档预览组件
npm install @vue-office/excel vue-demi#pdf文档预览组件
npm install @vue-office/pdf vue-demi

如果是vue2.6版本或以下还需要额外安装 @vue/composition-api

npm install @vue/composition-api

代码(与ifrem用法类似)

doc:目前只支持docx文件预览,不支持doc文件

excil:目前只支持xlsx文件预览,不支持xls文件

pdf:无

注:doc,excil,pdf代码基本一致(以docx为例)

<template><vue-office-docx:src="docx"style="height: 100vh;"@rendered="renderedHandler"@error="errorHandler"/>
</template><script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'export default {components: {VueOfficeDocx},data() {return {docx: '' //设置文档网络地址,可以是相对地址}},methods: {renderedHandler() {console.log("渲染完成")},errorHandler() {console.log("渲染失败")}}
}
</script>

上传文件预览: 如果是原生的input type="file",也是类似的

<template><div id="docx-demo"><el-upload:limit="1":file-list="fileList"accept=".docx":beforeUpload="beforeUpload"action=""><el-button size="small" type="warning">点击上传</el-button></el-upload><vue-office-docx :src="src"/></div>
</template><script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'export default {components: {VueOfficeDocx},data() {return {src: '',fileList: []}},methods: {//在beforeUpload中读取文件内容beforeUpload(file) {let reader = new FileReader();reader.readAsArrayBuffer(file);reader.onload = (loadEvent) => {let arrayBuffer = loadEvent.target.result;this.src = arrayBuffer};return false}}
}
</script>

相关文章:

vue 文件预览(docx、.xlsx、pdf)

1.ifream <iframe src"" ></iframe> 注: src里面是文件地址 2.vue-office 支持vue2和vue3提供docx、.xlsx、pdf多种文档的在线预览方案 2.1安装 #docx文档预览组件 npm install vue-office/docx vue-demi#excel文档预览组件 npm install vue-office…...

云架构(二) 大使模式

Ambassador pattern &#xff08;https://learn.microsoft.com/en-us/azure/architecture/patterns/ambassador&#xff09; 简单描述 创建一个助手服务&#xff0c;这个服务代表消费服务或者应用程序发送网络请求。大使服务可以看做是与客户机同一个位置的进程外代理。 这种…...

.NET Path类库的特殊方法

在.NET中Path类库是非常常用的一个类库&#xff0c;包含很多我们常用的方法&#xff0c;常用的方法这里就不详细说明了&#xff0c;这里记录下几个非常规的方法。 获取随机文件名&#xff1a; //将返回随机的文件名Console.WriteLine(Path.GetRandomFileName()); 获取禁止在路…...

【JVM】JVM常用性能调优参数详细介绍

JVM常用性能调优参数详细介绍 一、何时进行JVM调优二、性能调优三、JVM调优的基本原则四、JVM调优目标五、JVM调优的步骤六、JVM参数七、JVM参数解析及调优八、JVM参数使用手册8.1 内存相关8.2 GC策略相关8.3 GC日志相关8.4 异常相关8.5 问题定位及优化相关九、参考文档一、何时…...

React中的受控组件与非受控组件

受控组件与非受控组件 受控组件 组件(input, select)的状态与state的值绑定&#xff0c;组件的状态全程响应外部数据 class TestComponent extends React.Component {constructor (props) {super(props);this.state { username: lindaidai };}render () {return <input …...

uniapp实现u-datetime-picker时间选择器的默认日期定位,解决default-value不生效问题

uniapp实现u-datetime-picker&#xff0c;设置默认定位日期&#xff0c;解决default-value不生效问题 想实现的效果是点开时间选择器默认显示当前日期&#xff0c;而不是该选择器最早的日期 给选择器添加ref属性&#xff0c;如下&#xff1a; <u-datetime-picker :show&q…...

react native 使用ScrollView实现下拉更新,上拉加载更多

在React Native中&#xff0c;要实现下拉更新和上拉加载更多的功能&#xff0c;你需要自定义ScrollView组件&#xff0c;监听滚动事件并根据滚动的位置来判断何时触发更新和加载更多的操作。以下是一个基本的实现思路&#xff1a; 监听滚动事件&#xff1a;使用ScrollView的on…...

vue2完结

笔记 关于不同版本的Vue: 1.vue.js与vue.runtime.xxx.js的区别&#xff1a;&#xff08;1&#xff09;vue.js是完整版的Vue,包含&#xff1a;核心功能模板解析器&#xff08;2&#xff09;vue.runtime.xxx.js是运行版本的Vue,只包含核心功能&#xff0c;没有模板解析器 2.因为…...

前端网页之间传递参数

在多页面应用中&#xff0c;我们可能面临着前端页面之间传递参数的情况&#xff0c;在一个页面获取到一些参数信息后&#xff0c;到另一个页面去进行后续处理&#xff0c;需要将前一个页面得到的一些参数带到第二个页面。当参数较少时&#xff0c;可以在跳转第二个页面时通过se…...

【常见面试题】Golang中,协程数最多可以开多少个?

参考&#xff1a; Goroutine 究竟可以开多少&#xff1f; 一、先说结论&#xff1a; 能开多少个协程&#xff0c;取决于单个协程处理方法所占用的CPU和内存资源&#xff08;也就是看你计算机运行的应用程序的具体代码逻辑&#xff09;。 二、具体来说&#xff1a; 如果是C…...

RabbitMQ基础笔记

视频链接&#xff1a;【黑马程序员RabbitMQ入门到实战教程】 文章目录 1.初识MQ1.1.同步调用1.2.异步调用1.3.技术选型 2.RabbitMQ2.1.安装2.1.1 Docker2.1.1 Linux2.1.1 Windows 2.2.收发消息2.2.1.交换机2.2.2.队列2.2.3.绑定关系2.2.4.发送消息 2.3.数据隔离2.3.1.用户管理2…...

大型项目管理神器:掌握yarn monorepo的安装和使用

I. 引言 在当今的前端开发中&#xff0c;由于项目规模的不断增长和多团队协同&#xff0c;Monorepo成为了越来越流行的开发模式。Monorepo指的是将多个相关项目或者模块打包在一起的软件开发模式&#xff0c;它可以让开发人员更好地组织管理代码&#xff0c;减少重复的代码&am…...

算法打卡day28|贪心算法篇02|Leetcode 122.买卖股票的最佳时机 II、55. 跳跃游戏、45.跳跃游戏 II

算法题 Leetcode 122.买卖股票的最佳时机 II 题目链接:122.买卖股票的最佳时机 II 大佬视频讲解&#xff1a;买卖股票的最佳时机 II视频讲解 个人思路 因为只有一只股票&#xff0c;且两天作一个交易单元&#xff0c;那每次只收集正利润就可以最终最多可以获取的利润&#xf…...

2013年认证杯SPSSPRO杯数学建模A题(第一阶段)护岸框架全过程文档及程序

2013年认证杯SPSSPRO杯数学建模 A题 护岸框架 原题再现&#xff1a; 在江河中&#xff0c;堤岸、江心洲的迎水区域被水流长期冲刷侵蚀。在河道整治工程中&#xff0c;需要在受侵蚀严重的部位设置一些人工设施&#xff0c;以减弱水流的冲刷&#xff0c;促进该处泥沙的淤积&…...

【3】3道链表力扣题:删除链表中的节点、反转链表、判断一个链表是否有环

3道链表力扣题 一、删除链表中的节点&#x1f30f; 题目链接&#x1f4d5; 示例&#x1f340; 分析&#x1f4bb; 代码 二、反转链表&#x1f30f; 题目链接&#x1f4d5; 示例&#x1f340; 分析① 递归② 迭代 三、判断一个链表是否有环&#x1f30f; 题目链接&#x1f4d5; …...

mongodb sharding分片模式的集群数据库,日志治理缺失导致写入数据库报错MongoWriteConcernException的问题总结(上)

一、背景 常见的mongodb集群模式有以下三种&#xff1a; 主从复制&#xff08;Master-Slave&#xff09;模式副本集&#xff08;Replica Set&#xff09;模式分片&#xff08;Sharding&#xff09;模式 公司测试环境搭建的集群采用分片模式&#xff0c;有同事反馈说&#xf…...

苹果Mac OS系统上安装brew

1.命令行安装brew Homebrew是 mac的包管理器&#xff0c;仅需执行相应的命令,就能下载安装需要的软件包&#xff0c;可以省掉自己去下载、解压、拖拽(安装)等繁琐的步骤。 a. 打开HomeBrew官网&#xff1a;https://brew.sh/index.html b. 点击页面上的复制按钮&#xff0c;打…...

应用侧渲染流程

应用侧渲染流程 《Android应用程序UI硬件加速渲染环境初始化过程分析》 https://blog.csdn.net/Luoshengyang/article/details/45769759 《Android HWUI绘制流程》 https://wizzie.top/android/android_HWUI_Draw/#1-gpu%E6%B8%B2%E6%9F%93%E7%A1%AC%E4%BB%B6%E5%8A%A0%E9%…...

学生党开放式运动耳机怎么选?五款超高销量高性价比品牌推荐

开放式运动耳机成为了许多人的运动首选装备&#xff0c;想要在众多的开放式耳机中找到一款价格亲民&#xff0c;且性能在线高性价比的开放式运动耳机可并非那么简单&#xff0c;所以今天我就来为大家推荐五款超高销量、高性价比的运动耳机品牌。 在推荐之前&#xff0c;整理了…...

服务器中有g++,但是查询不到,Command ‘g++‘ not found

有gcc但是查询不到g&#xff0c;gcc版本为9.5.0 (base) zyICML:~$ g -V Command g not found, but can be installed with: apt install g Please ask your administrator. 突然就出现这个问题&#xff0c;导致detectron装不上&#xff0c;现在有时间了专门研究下怎么解决 这…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

拟合问题处理

在机器学习中&#xff0c;核心任务通常围绕模型训练和性能提升展开&#xff0c;但你提到的 “优化训练数据解决过拟合” 和 “提升泛化性能解决欠拟合” 需要结合更准确的概念进行梳理。以下是对机器学习核心任务的系统复习和修正&#xff1a; 一、机器学习的核心任务框架 机…...

统计学(第8版)——统计抽样学习笔记(考试用)

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

RLHF vs RLVR:对齐学习中的两种强化方式详解

在语言模型对齐&#xff08;alignment&#xff09;中&#xff0c;强化学习&#xff08;RL&#xff09;是一种重要的策略。而其中两种典型形式——RLHF&#xff08;Reinforcement Learning with Human Feedback&#xff09; 与 RLVR&#xff08;Reinforcement Learning with Ver…...

二维数组 行列混淆区分 js

二维数组定义 行 row&#xff1a;是“横着的一整行” 列 column&#xff1a;是“竖着的一整列” 在 JavaScript 里访问二维数组 grid[i][j] 表示 第i行第j列的元素 let grid [[1, 2, 3], // 第0行[4, 5, 6], // 第1行[7, 8, 9] // 第2行 ];// grid[i][j] 表示 第i行第j列的…...