vue 实现 word/excel/ppt/pdf 等文件格式预览操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 实现 word/excel/ppt/pdf 等文件格式预览操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、方法一

第三方服务接口地址：XDOC文档预览服务

特征：有文件大小限制，超过要收费！

使用方法

// Url 为 .docx 格式的链接地址
<iframe :src="'https://view.xdocin.com/view?src='+Url" frameborder="0" style="" width='100%' height='100%'></iframe>

二、方法二

参考地址：https://api.gitee.com/zhou_andong/vue-office/

一、安装插件 vue-office

//docx、excel、pdf文档预览组件，vue-office插件，其中docx文档预览是通过对docx-preview插件的二次封装，docx-preview插件不支持doc格式文件；docx文档预览是对exceljs插件的二次封装；不支持移动端。

npm install --save @vue-office/docx @vue-office/excel @vue-office/pdf vue-demi

二、在引用时会涉及版本不兼容的问题

可以在npm包库，查看版本：https://www.npmjs.com/

1、搜索插件名

vue 实现 word/excel/ppt/pdf 等文件格式预览操作,VUE+ElmentUI,vue.js,word,excel,前端

2、以下版本没有具体说明的话，只能根据你的vue版本去试，哪个版本合适

三、页面引用

<template>
  <vue-office-docx :src="url" />
  <vue-office-excel :src="url" />
  <vue-office-pdf :src="url" />
</template>

<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
import VueOfficePdf from '@vue-office/pdf'

export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      url: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
    }
  }
}
</script>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~文章来源地址https://www.toymoban.com/news/detail-572228.html

到了这里，关于vue 实现 word/excel/ppt/pdf 等文件格式预览操作的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！