vue 实现在线预览office文件

最新推荐文章于 2024-03-01 17:38:31 发布

一个假的前端男

最新推荐文章于 2024-03-01 17:38:31 发布

阅读量479

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/IT_iosers/article/details/136401955

版权

说明：`https://view.xdocin.com/view?src=" + encodeURIComponent("要预览的文件路径（要求必须是外网）")`

iframe使用

   <iframe
      v-if="['xls', 'xlsx', 'ppt', 'docx', 'doc', 'txt', 'pptx', 'md'].includes(fileType)"
      style="width: 100%; height: 100vh;"
      :src="`https://view.officeapps.live.com/op/view.aspx?src=${file.url}`"
      frameborder="0"
    ></iframe>

window.open

 window.open("https://view.xdocin.com/view?src=" + encodeURIComponent('要预览的文件路径（要求必须是外网）')");

优惠劵

一个假的前端男

关注关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
vue 实现在线预览office文件

【代码】vue 实现在线预览office文件。
复制链接

扫一扫

基于Web的文件管理系统，支持Office、WPS预览/编辑、在线解压缩、文件分享、文件加密、远程存储、远程文件推送、秒传、断点

12-23

MxsDoc是基于Web的文件管理系统，支持权限管理、历史版本管理、Office预览/编辑、WPS预览/编辑、在线解压缩、文件分享、文件加密、远程存储、远程文件推送、秒传、断点续传、智能搜索、文件备注、自动备份、一键迁移、集群部署。主要应用场景：文件管理系统、协同办公系统、电子书、知识管理系统、软件接口管理系统、自动备份软件、网页版SVN仓库、网页版GIT仓库。

【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件

热门推荐

weixin_44590591的博客

05-30

4万+

Vue实现文档在线预览文档，在线预览PDF、Word、Excel和ppt等office文件

参与评论您还未登录，请先登录后发表或查看评论

Vue中如何实现在线预览word文件、excel文件

qq_59710846的博客

07-04

1万+

（1）安装 npm install --save mammoth1（2）引入import mammoth from “mammoth”;1。

Vue项目实现在线预览文件【超实用】

weixin_44590591的博客

07-13

4880

假设有一个Vue组件，需要显示一个文件的链接，并提供文件预览功能。

Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件

weixin_54930261的博客

02-27

879

JS调用（带水印）：

前端vue3实现本地及在线文件预览（含pdf/txt/mp3/mp4/docx/xlsx/pptx）

Sylvasylva的博客

11-10

1万+

本地或内网预览需要借助插件实现，pdf、mp3、mp4等主要靠原生标签或浏览器自带功能，尽量减少了插件的安装。

java 实现office文档的在线预览

09-27

java 实现的文档在线预览：需要下载的工具有：OpenOffice+flexpaper+swftools+jodcconverter * .启动OpenOffice的服务 * 1 win+R开启dos窗口 * 2 执行：cd C:\Program Files (x86)\OpenOffice 4\program * 3 ...

纯前端文档预览，Vue实现，无需后端，支持Word、Excel、PPT、pdf、文本、图片，附接入demo和文档

02-09

纯原创资源，盗用必究，仅用于学习和交流，持续更新，...3. 支持所有文本、代码格式，所有主流图片格式，.mp4，.docx，.xlsx，.pptx, .pdf等主流文档格式的纯前端预览 4. 附带接入demo，使用纯js实现，可以用于任何场景

基于wps在线编辑、在线预览前端vue项目，基于es6

08-23

基于wps在线编辑、在线预览前端vue项目，基于es6。本项目采用VUE + ES6实现，其中jwps.es6.js是由WPS开发组特别提供，本项目对该js做了部分调整

vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件预览

04-06

vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流预览。实现前端选择文件直接在页面展示，或者请求后端获取base64 string 字符串转码在前端页面展示

SpringBoot实现的在线实时编辑文档

02-25

1.本项目后端技术采用基于SpringBoot框架，MySQL数据库，前端技术采用html，css，js。 2.本项目是一个类似腾讯文档在线编辑模块的实时协同编辑系统。 3.系统源码连同sql文件一起打包放在我的资源包里了。

Vue实现在线文档预览

不愿意做鱼的小鲸鱼の博客

07-07

1786

本次实现的文档预览的类型有：docx, xlsx, pptx, pdf,以及纯文本、代码文件和各种图片、视频格式的在线预览

Vue做docx/pdf/excle 文件预览

summer9826的博客

11-09

1万+

Vue做docx/pdf/excle 文件预览

Vue实现文档在线预览功能，上传预览PDF、Word等office文件

qq_49080170的博客

01-25

3650

Vue实现文档在线预览功能，上传预览PDF、Word等office文件

vue项目内嵌wps SDK小结

fzc578523475的博客

11-06

1317

血泪教训，如果布在本机（非服务器）启动的项目，使用localhost访问wps中台url链接，会报跨域，哪怕在中台配置了跨域ip，解决办法，本机启动后将本地浏览器url中的localhost改成127.0.0.1，原理有懂的小伙伴儿可以评论区留言。await wps.tabs.switchTab({ tabKey:'InsertTab'}). //切换到插入功能。props:['wpsUrl','token']， //两个关键参数访问url和。wpsUrl:'url', //必须参数。

vue项目实现在线文档预览效果：Office、PDF、Word等格式一网打尽

qq_41786018的博客

01-26

1352

在项目中遇到过一个实际需求，需要能够预览office、pdf、word等在线文件，要是让我们自己手写完全没一点思路，不过好在优秀的开源插件@vue-office/docx，@vue-office/excel，@vue-office/pdf直接就帮我们高效的实现了，让在线预览变得如此简单，话不多说我们开始学习如何在项目中使用这些插件帮我们完成需求点。

Vue文档预览的几种方式

最新发布

......

03-01

2287

闲来无事，记录一下，几种文档的预览。

office web apps在线office文件预览部署及问题处理

x10n9的博客

05-09

1521

文件下载链接网盘：链接: https://pan.baidu.com/s/1OmWM5END0jyWESGzFCniEw 提取码: ejpg基本环境需要两台机，1台为域控，1台为（office web apps ，需要加入到域）

vue-office实现文件预览

09-03

对于Vue项目中实现文件预览，你可以使用vue-office组件库。该组件库提供了丰富的功能，包括文件预览、编辑、保存等。首先，你需要在你的Vue项目中安装vue-office组件库。可以通过npm安装： ``` npm install vue-office --save ``` 安装完成后，在你的Vue组件中引入并使用vue-office组件。例如，你可以创建一个名为PreviewFile.vue的组件： ```vue <template> <div> <vue-office :fileUrl="fileUrl" :fileType="fileType" :options="options"></vue-office> </div> </template> <script> import 'vue-office/dist/style.css'; import VueOffice from 'vue-office'; export default { name: 'PreviewFile', components: { VueOffice }, data() { return { fileUrl: 'https://example.com/your-file-url', fileType: 'pdf', // 文件类型，支持pdf、word、excel、ppt options: {} // 可选配置项，如编辑模式、保存回调等 }; } }; </script> ``` 在上面的示例中，你需要设置`fileUrl`为你要预览的文件的URL，`fileType`为文件类型（支持pdf、word、excel、ppt），`options`为可选配置项（例如编辑模式、保存回调等）。请注意，这个示例假设你已经有一个文件服务器，并且可以通过URL访问到文件。如果你的文件是存储在本地或其他地方，请根据实际情况修改`fileUrl`。最后，你可以在你的页面中使用PreviewFile组件来实现文件预览： ```vue <template> <div> <PreviewFile></PreviewFile> </div> </template> <script> import PreviewFile from './PreviewFile.vue'; export default { name: 'App', components: { PreviewFile } }; </script> ``` 这样，你就可以在Vue项目中实现文件预览功能了。记得根据你的需求修改`fileUrl`和`fileType`，以及其他可选配置项。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交