</template>//引入VueOfficeDocx组件importVueOfficeDocxfrom'@vue-office/docx'//引入相关样式import'@vue-office/docx/lib/index.css'exportdefault {components:{VueOfficeDocx},data(){return {docx:'http://static.shanhuxueyuan.com/test6.docx'//设置文档网络地址,可以是相对地址}},methods:{rendered(){co...
#docx文档预览npm install@vue-office/docx#excel文档预览npm install@vue-office/excel#pdf文档预览npm install@vue-office/pdf 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api npm install @vue/composition-api 使用例子 文档预览场景大致分为两种: 1.网络地址/本地项目地址,比如 https://***.pdf ...
<vue-office-docx :src="docxUrl" @rendered="renderingCompleted" /> </template> import { ref } from 'vue'; //引入VueOfficeDocx组件 import VueOfficeDocx from '@vue-office/docx'; //赋值文档路径 此目录可以是http地址,也可以是本地文件 const docxUrl= ref("./src/assets/docx/test.docx")...
<vue-office-docx :src="docx" @rendered="rendered"/> </template> //引入VueOfficeDocx组件 import VueOfficeDocx from '@vue-office/docx' //引入相关样式 import '@vue-office/docx/lib/index.css' export default { components:{ VueOfficeDocx }, data(){ return { docx: 'http://static.shanhu...
1 安装vue-office npm install@vue-office/docx vue-demi// 预览docxnpm install@vue-office/excel vue-demi// 预览 excelnpm install@vue-office/pdf vue-demi//预览pdf 如果控制台报错,可能是vue版本<=2.6,需安装依赖 @vue/composition-api npm install @vue/composition-api ...
// import '@vue-office/docx/lib/index.css' export default { components: { VueOfficeDocx, }, data() { return { // docx: 'http://static.shanhuxueyuan.com/test6.docx' ,//设置文档网络地址,可以是相对地址 docx: `${"/ps"}.docx`, //设置文档网络地址,可以是相对地址 ...
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api npm install @vue/composition-api 使用示例 文档预览场景大致可以分为两种: 有文档网络地址,比如 https://***.docx 文件上传时预览,此时可以获取文件的ArrayBuffer或Blob .docx文件预览 使用网络地址预览 <template> <vue-office-docx :src="docx" styl...
vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库,支持vue2和vue3。 目标是成为使用最简单,功能最强大的文件预览库 功能特色 • 一站式:提供docx、.xlsx、pdf多种文档的在线预览方案,有它就够了,不用再四处寻找、测试、集成各种库了 ...
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。 复制 npm install @vue/composition-api/ 1. 使用文件的网络地址预览代码: 复制 <template> <vue-office-docx :src="docx" style="height: 100vh;" @rendered="rendered" /> </template> ...
在vue项目中使用vue-office,首先需要安装相应的包。对于docx文档预览,可以使用npm install @vue-office/docx命令进行安装;对于excel和pdf文档预览,也可以通过类似的方式安装@vue-office/excel和@vue-office/pdf。 然后在你的vue组件中,可以通过设置src属性(网络地址)来指定需要预览的文档。例如,对于docx文件预览,可以这...