vue 预览 pdf、word、excel

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/

相关推荐

  1. vue实现图片

    2023-12-28 11:36:08       5 阅读
  2. vue图片 90度旋转

    2023-12-28 11:36:08       33 阅读
  3. vue简单的图片

    2023-12-28 11:36:08       34 阅读
  4. Vue 移动端制作PDF

    2023-12-28 11:36:08       39 阅读
  5. vue pdf、word、excel

    2023-12-28 11:36:08       41 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-28 11:36:08       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-28 11:36:08       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-28 11:36:08       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-28 11:36:08       18 阅读

热门阅读

  1. Vue 3 中安装并使用 Axios 详细步骤+样例代码详解

    2023-12-28 11:36:08       30 阅读
  2. Ajax

    2023-12-28 11:36:08       28 阅读
  3. PDF.js介绍以及使用

    2023-12-28 11:36:08       38 阅读
  4. PDF是什么格式的文件

    2023-12-28 11:36:08       37 阅读
  5. Unity相机跟随角色移动

    2023-12-28 11:36:08       33 阅读
  6. C# JsonString转Object以及Object转JsonString

    2023-12-28 11:36:08       34 阅读
  7. C++ list的模拟实现

    2023-12-28 11:36:08       30 阅读