<vue-office-pdf style="height: 100%;" :src="pdf" @rendered="rendered"/> </template> //引入相关样式 import '@vue-office/docx/lib/index.css' import '@vue-office/excel/lib/index.css' //引入VueOffice组件 import VueOfficeDocx from '@vue-office/docx' import VueOfficeExcel from '@vue...
<template> <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" /> </template> //引入VueOfficePdf组件 import VueOfficePdf from '@vue-office/pdf' export default { components: { VueOfficePdf }, data() { return { pdf: 'http://static.shanhuxueyuan.com/test....
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-docx :src="docxUrl" @rendered="renderingCompleted" ...
npm install @vue-office/pdf vue-demi@0.14.6 vue2.6版本或以下还需要额外安装 @vue/composition-api npm install @vue/composition-api 2. 使用示例: <template> <el-tabs v-model="activeName" class="custom-tabs"> <el-tab-pane label="用户协议" name="1"> </el-tab-pane> <el-tab-pane...
};console.log(JSON.stringify({ error: e }));throw error;} let out = doc.getZip().generate({ type: "blob",mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" //导出⽂件格式 });saveAs(out, name + ".docx");} );},//获取base64格式图⽚ ...
/> </template> //引入VueOfficePdf组件 import VueOfficePdf from '@vue-office/pdf' export ...
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 ...
vue-office,一个支持多种文件docx、excel、pdf预览的vue组件库,作者hit757。这个库不仅能支持vue2/3,也支持非Vue框架的预览使用。 先看一下线上演示效果,如果实现效果与项目使用不符,为节约朋友们时间,可自行选择是否向下阅读。演示地址:https://501351981.github.io/vue-office/examples/dist/#/docx。