首页 > 其他分享 ># vue 预览 pdf、word、excel

# vue 预览 pdf、word、excel

时间:2023-12-27 09:22:22浏览次数:39  
标签:vue word 预览 office excel pdf

vue 预览 pdf、word、excel

这是之前做项目的时候涉及到的一个功能,当时做了之后就一直没有整理,其实也很简单,功能不多,只是预览,没有在线编辑的功能,所以呢,啊哈哈哈哈哈,一个插件就可以了。

预览 pdf

预览 pdf 我是用的这个插件,直接运行一下命令就可以了:

npm install @vue-office/pdf vue-demi

然后在使用他的页面引入就可以使用了:

import VueOfficePdf from '@vue-office/pdf'

然后使用也很简单:

<vue-office-pdf style="min-height: 500px;" :src="path" />

其中 path 是 PDF 文件的地址。

预览 word

其实这几个插件是一个妈生的,运行下面命令安装一下预览 word 的插件:

npm install @vue-office/docx vue-demi

然后同样是引入:

import VueOfficeDocx from '@vue-office/docx'

使用是和上面 pdf 差不多的:

<vue-office-docx style="min-height: 500px;" :src="path" />

这里的 path 就是 word 文件的地址。

预览 excel

同样,运行命令安装一下预览 excel 的插件:

npm install @vue-office/excel vue-demi

安装完成还是引入:

import VueOfficeExcel from '@vue-office/excel'

引入完成一样是使用:

<vue-office-excel style="min-height: 500px;" :src="path"  />

这里的 path 就是 excel 文件的地址。

好了预览完成了!

更多详细内容,戳这里:https://501351981.github.io/vue-office/examples/docs/guide/

标签:vue,word,预览,office,excel,pdf
From: https://www.cnblogs.com/wjw1014/p/17929788.html

相关文章

  • 如何从Word中的整个文档中选择页面范围?
    转自:如何从Word中的整个文档中选择页面范围?如果要在Word文档中选择任何页面范围,可以用几种方法完成它?现在,我介绍一些技巧,供您选择MicrosoftWord中的页面范围。按住Shift键并在Word中选择页面范围使用VBA选择页面范围选择一系列页面KutoolsforWord 按住Shift键并在Word......
  • vue+go实现注册功能
    <!DOCTYPEhtml><html><head><metacharset="utf8"><style>.container{width:400px;margin:0auto;padding:20px;border:1pxsolid#ccc;border-......
  • Vue3+TS+Vite中 vConsole 插件的使用
    vConsole一个轻量、可拓展、针对手机网页的前端开发者调试面板。vConsole是框架无关的,可以在Vue、React或其他任何框架中使用。现在vConsole是微信小程序的官方调试工具。https://gitee.com/Tencent/vConsole/ 平时在web应用开发过程中,我们可以console.log去输出一些......
  • 【CF30E】Tricky and Clever Password 题解(manacher + exKMP)
    manacher+exKMP+二分。感觉是最粗暴的方法,想出来之后自己硬莽了4k,荣获题解区最长。Solution约定:下文所提及到的所有的回文串,均指奇长度回文串。显然把题目拆成两个部分,中间的回文串,以及两边相同的连续子串。考虑一下从哪个入手比较好。忘记是咋想的了,易得从两边相同......
  • Word 文档怎么保留修改前和修改后的内容--审阅 修订
    如果启用了修订内容后,对文档的内容进行了相关的修改后。则文档可以同时显示被修改的内容和修改后的内容。下面,本文通过举例具体介绍如何使用修订功能。点击选中文档内容,然后依次点击【审阅】-【修订】-【修订】选项。通过以上操作步骤,此时的文档内容处于修订的状态,用户在文档中直接......
  • vue3 elementplus 表格表头过长 三个点显示
    vue3:constrenderHeaderMethods=({column})=>{returncreateVNode(resolveComponent('el-tooltip'),{effect:'dark',content:column.label,placement:'top'......
  • 【已解决】WordPress安装插件提示:需要访问您网页服务器的权限
    前一段时间把workpress做了迁移后,发现安装插件的时候会给出如下提示: 经过百度查询找到解决方法,修改 /var/www/html/wp-config.php文件,增加字段:define('FS_METHOD','direct');如下图 之后重启服务:systemctlrestarthttpd,即可正常安装插件了,如下 ......
  • 从零开始封装 vue 组件
    对于学习Vue的同学来说,封装vue组件是实现代码复用的重要一环。在Vue官网中非常详细地介绍了vue组件的相关知识,我这里简单摘取使用最频繁的几个知识点,带大家快速入门vue组件的使用。快速入门我们假设在页面上有很多地方都要用到一个计数器,与其在每个地方都实现计数器功能,......
  • vue3学习之Pinia状态管理
    状态管理 src/views/Pinia.vue<scriptsetup>import{ref}from"vue";import{storeToRefs}from"pinia";import{useCounterStore}from"../stores/counter";import{useTodos}from"../stores/todos";//可......
  • nginx部署vue编译项目刷新页面404
    原因:nginx配置错误。因为vue打包输出的是单页网页应用,只有一个index.html入口,其他路径是由前端路由去跳转的,服务器目录下没有对应物理路径,所以就会报404。这样的nginx配置会出现该问题。location/{alias/home/vue/dist/;indexindex.html;}  解......