vue在线预览excel、pdf、word文件

安装

javascript 复制代码
//docx文档预览组件
npm install @vue-office/docx vue-demi

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

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

使用示例

  1. docx文档的预览
javascript 复制代码
<template>
  <vue-office-docx :src="src" @rendered="rendered"/>
</template>

<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'

export default {
  components:{
    VueOfficeDocx
  },
  data(){
    return {
      src: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>
  1. excel文档预览
javascript 复制代码
<template>
  <vue-office-excel :src="src" @rendered="rendered"/>
</template>

<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'

export default {
  components:{
    VueOfficeExcel
  },
  data(){
    return {
      src: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>
  1. pdf文档预览
javascript 复制代码
<template>
  <vue-office-pdf :src="src" @rendered="rendered"/>
</template>

<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

export default {
  components:{
    VueOfficePdf
  },
  data(){
    return {
      src: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
    }
  },
  methods:{
    rendered(){
      console.log("渲染完成")
    }
  }
}
</script>

扩展

如果你想要更丰富的文件在线预览功能,可以参考文件在线预览项目

相关推荐
A_ugust__14 分钟前
vue3+ts 封装跟随弹框组件,支持多种模式【多选,分组,tab等】
前端·javascript·vue.js
林九生17 分钟前
【Vue3】v-dialog 中使用 execCommand(‘copy‘) 复制文本失效的原因与解决方案
前端·javascript·vue.js
小菜全2 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
yz17800414102 小时前
window pdf文件批量转高清图片png、jpg
pdf·bash
真的想不出名儿5 小时前
vue项目引入字体
前端·javascript·vue.js
笨蛋不要掉眼泪5 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
2501_930707787 小时前
C#:将Excel转换为HTML时将图像嵌入HTML中
excel
咬尾巴的猫在coding7 小时前
pandas读取和写入excel
excel·pandas
奶糖 肥晨8 小时前
Uniapp 开发中遭遇「可选链赋值」语法陷阱:一次编译错误排查实录
javascript·vue.js·uni-app
belldeep9 小时前
python:Django 和 Vue.js 技术栈解析
vue.js·python·django