npm install @vue-office/docx //excel文档预览组件 npm install @vue-office/excel //pdf文档预览组件 npm install @vue-office/pdf 1. 2. 3. 4. 5. 6. 7. 8. 9. 二、代码示例 <!-- word文档预览示例 @rendered="renderingCompleted"渲染完成后调用函数进行逻辑处理--> <template> <vue-office-do...
<vue-office-docx v-if="previewType === 'word'" :src="previewUrl" @rendered="renderingCompleted"/> <vue-office-excel v-if="previewType === 'excel'" :src="previewUrl" @rendered="renderingCompleted" /> <vue-office-pdf v-if="previewType === 'pdf'" :src="previewUrl" @rendered="r...
<template> <vue-office-pdf :src="pdf" @rendered="rendered"/> </template> //引入VueOff...
在vue文件中引入依赖,示例代码如下: //引入相关样式import'@vue-office/docx/lib/index.css'import'@vue-office/excel/lib/index.css'//引入VueOffice组件importVueOfficeDocxfrom'@vue-office/docx'importVueOfficeExcelfrom'@vue-office/excel'importVueOfficePdffrom'@vue-office/pdf'exportdefault{components:{Vue...
pdf文档预览组件 npm install @vue-office/pdf vue-demi@0.13.11 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api npm install @vue/composition-api 使用示例 文档预览场景大致可以分为两种: 有文档网络地址,比如 https://***.docx 文件上传时预览,此时可以获取文件的ArrayBuffer或Blob .docx文件预览...
2)、使用vue-office/pdf组件实现: 首先要安装组件:npm install --save @vue-office/pdf 使用示例: <template> <vue-office-pdf :src="pdfUrls" class="docx-calss" @rendered="rendered" /> </template> import VueOfficePdf from "@vue-office/pdf"; export default { name: 'pdf...
npm install @vue-office/docx vue-demi //excel文档预览组件 npm install @vue-office/excel vue-demi //pdf文档预览组件 npm install @vue-office/pdf vue-demi 1. 2. 3. 4. 5. 6. 7. 8. 引入组件、注册 引入进来是个组件,注册一下就可以直接使用了 ...
vue-office vue-office支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3,也支持非Vue框架的预览。 特点 一站式:提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线预览 简单:只需提供文档的src(网络地址、本地地址)即可完成文档预览 ...
VueOfficePDF } } ``` ```html <template> <vue-office-pdf :src="pdfUrl" width="100%" height="600px"></vue-office-pdf> </template> 1. PDF文档无法加载:如果发现PDF文档无法加载,请确保PDF文档的URL是正确的,并且服务器支持跨域访问。 2. PDF编辑功能无法正常使用:如果发现PDF编辑功能无法正常...