在做项目的时候会遇到docx、xlsx、pdf等文件的在线预览需求,实现此需求可以有多种解决方式,本文基于vue-office实现纯前端的文件预览。 效果 如下图,分别为docx、xlsx、pdf三种类型的文件在线加载后的效果。你也可以访问官方预览网址查看效果。 image.png 实现 1. 添加依赖 在package.json文件中添加如下依赖,并通过命...
Google Docs Viewer是另一个在线查看器服务,可以在网页中嵌入Office文档的预览。 实现步骤: 将Office文件上传到一个可以公开访问的URL。 在Vue组件中使用iframe来嵌入Google Docs Viewer: vue <template> <div id="app"> <iframe :src="'https://docs.google.com/viewer?url=' + encodeUR...
如下图,分别为docx、xlsx、pdf三种类型的文件在线加载后的效果。你也可以访问官方预览网址查看效果。 实现 1. 添加依赖 在package.json文件中添加如下依赖,并通过命令npm i安装依赖。 代码语言:javascript 复制 { ..., "dependencies": { "@vue-office/docx": "1.6.0", "@vue-office/excel": "1.6.0",...
一站式:提供docx、pdf、excel多种文档的在线预览方案,有它就够了 简单:只需提供文档的src(网络地址)即可完成文档预览 体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态 安装 docx文档预览组件 npm install @vue-office/docx vue-demi@0.13.11 excel文档预览组件 npm install @vue-office/excel...
1. 在线文档编辑 <template> <vue-word-editor v-model="docContent" /> </template>...
方法一、 Luckysheet 预览 Luckysheet 是一个类似于 excel 的在线电子表格,功能强大、配置简单且完全开源。 安装Luckysheet 1、通过CDN引入依赖 由于Luckysheet 现在还没有发布出模块化的开发,不能使用 npm,所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件,在里面添加如下代码 ...
前端实现文档在线预览功能 最直接的就是使用XDOC 文档云服务 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览,具体实现方法请看官方文档下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制 XDOC文档预览服务接口简单,只需要传入文档地...
4 上传完文件需要预览的数据,需要转为路径使用,常用下面方法转化 <template> <!-- <VueOfficeDocx v-if="src" style="height: 600px;" :src="src" /> --> <!-- <VueOfficeExcel v-if="src" style="height: 600px;" :src="src" /> --> <VueOfficePdf v-if="src" style="height...
vue java实现在线预览 office online javaweb vue 初始版本:vue3.X vue/cli4.5.14 node.js14.18.1 webpack5.58.2 webpackcli4.9.1 === 建立项目如下 完成的项目结构如下=== 入口文件main.js,程序启动自动执行这个文件,自动跳转到根组件App.vue // The...
vue-office支持多种文件(docx、excel、pdf)预览的vue组件库,支持vue2/3,也支持非Vue框架的预览。 特点 一站式:提供word(.docx)、pdf、excel(.xlsx, .xls)多种文档在线预览 简单:只需提供文档的src(网络地址、本地地址)即可完成文档预览 体验好:选择每个文档的最佳预览方案,保证用户体验和性能都达到最佳状态 ...