Vue - Vue 集成 pdf word excel 预览功能

1、安装依赖

@vue-office 是一款集合了docx、excel、pdf 三种文件预览的 Vue 组件库，在安装该组件之前需要先安装 vue-demi ，命令如下：

npm install vue-demi

输入以下命令分别安装 word 、excel 和 pdf 三个预览插件

npm i @vue-office/docx

npm install @vue-office/excel

npm install @vue-office/pdf

也可以同时安装所有插件，命令如下：

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

卸载时运行 npm uninstall + 对应插件名 即可，如下所示：

npm uninstall @vue-office/pdf

安装后可在 Vue 项目的 package.json 中查看安装依赖项

2、使用

在 Vue 组件中使用方式如下：

<script setup>
import {ref} from "vue";
import VueOfficePdf from '@vue-office/pdf'
import VueOfficeExcel from '@vue-office/excel'
import VueOfficeDocx from '@vue-office/docx'

const pdf = ref('http://static.shanhuxueyuan.com/test.pdf') //设置文档地址
// const xlsx=ref('http://static.shanhuxueyuan.com/demo/excel.xlsx') //设置文档地址
// const docx=ref('http://static.shanhuxueyuan.com/test6.docx') //设置文档地址
function renderedHandler() {
  console.log("渲染完成")
}

function errorHandler(e, f) {
  console.log("渲染失败" + e)
}
</script>

<template>
  <VueOfficePdf
      :src="pdf"
      @rendered="renderedHandler"
      @error="errorHandler"
  />
</template>

更多

插件详细使用说明请查阅官网文档：
https://www.npmjs.com/package/@vue-office/pdf?activeTab=readme