只有内网，前端vue能否实现在线阅读功能呢

已于 2022-11-23 15:21:24 修改
阅读量179 收藏
点赞数
分类专栏： 在线阅读 vue 文章标签： 前端框架 vue.js elementui
于 2022-07-29 16:07:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40799309/article/details/126058106
版权
针对公司内网环境，实现在线阅读Word文档的需求，可以通过使用支持读取数据流的预览插件来解决。已找到一个Vue插件，能够有效预览docx和经过后端处理的doc文件，适用于内网环境，提供稳定且安全的在线文档预览功能。
摘要由CSDN通过智能技术生成

最近公司要实现在线阅读文档功能，应该是只是阅读word文档，但是查了一下，大部分都是能够访问外网的。公司只有内网，无法连外网，所以想请问帮忙想想还有什么办法能够实现

显示的样子类似于下图所示的样子，我用的vue，想问一下有什么好的插件之类的支持在线阅读么。没有做过这个功能，目前不知道有什么好的方法。已经解决，非常感谢一大牛

网址vue 在线预览 word ，Excel，pdf，图片 数据流 内网文件流 亲测有效（word 目前支持docx文件以及doc文件（doc需要后端处理））_勤能补拙(vue小白一枚)的博客-CSDN博客_vue在线预览doc文件

爱喝奶茶~
关注
专栏目录
vue2/3 - 详细实现内网使用离线高德地图功能，在vue中无需网络离线使用高德地图相关功能，高德地图如何离线加载详细教程(内网部署及使用)，提供最新完整的瓦片资源下载及相关工具（示例代码，一键复制
高级前端工程师
02-18 4246
vue，vue2，vue3，高德地图，离线使用高德地图，高德地图瓦片官方下载，vue内网使用高德地图离线无网络，断网情况下使用高德地图，vue离线高德地图教程，如何实现内网部署高德地图，无需联网离线使用，vue+ts实现离线高德地图 内网离线高德地图，如何在高德地图Vue项目中下载离线地图，高德离线地图加载不出来，高德地图离线使用不显示怎么办，怎么解决vue内网使用离线高德地图加载失败问题，vue实现离线地图+高德瓦片，vue引入高德离线地图，vue项目如何使用离线高德地图和自定义地图样式，高德离线地图的下
Vue前端技术知识整理
shuux666的博客
03-09 5649
VueJS 第一步，安装node.js 安装包下载地址：https://nodejs.org/en/ 安装包下载安装完成后，在命令行使用 node -v 查看node版本，判断是否安装成功。 第二步，安装vue脚手架 安装淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack： npm install webpack@3.8.1 -g webpack -v 查看版本号 安装vue-cli脚手架工具
VUE实现PDF在线阅读
qq_30228701的博客
10-11 480
1、安装npm npm install --save vue-pdf 2、HTML部分 <div v-if="dataForm.pdfUrl !== '' & dataForm.pdfUrl !== null & dataForm.pdfUrl !== undefined"> <div class="pdf"> <pdf :src="pdfOption.src" :page="pdfOption.currentPage"
vuejs--如何阅读文档
琳琳的博客
03-11 1332
官方文档与实际项目文档会有差别,实际项目中使用了 vue-loader, 会自动加载所有的内容，按照webpacke + vue的约定. 官方文档是js文件 var Child = { template: ' A custom component! ' } new Vue({ // ... components: { // 将只在父模板可用 'my-component': Child } }) 实际项目是 <template> .... </
Javascript实现全屏阅读和复制功能
txun123的博客
03-28 896
//复制功能 var clip = null; function copyThis() { if($.browser.version==6.0){ //针对ie6 $('.copyit').live("click",function(){ var code=$(this).parent("p").siblings(".runcode").find("textarea").text(); window.clipboardData.setData("Text",code); }) return
vue+element-ui实现上传及预览文件
weixin_48787059的博客
02-09 1万+
目录标题前言上传文件实现代码预览文件实现代码 前言 上篇文章分享了微信小程序上传及预览文件的方法，本篇文章来分享一下vue+element实现上传及预览文件的方法,upload上传文件方法，是element-ui提供的方法，主要是利用其参数绑定方法进行上传操作，有想要深入了解的/博友，可到element-ui官网查看。window.open(url)可打开想要查看的文件，这些也是我最近搜索到的并且亲自实践过的,如果觉得有用，可上滑查看实现代码。 上传文件实现代码 <!-- show-file-l
element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件（浏览器打开文件的方式）
浮萍的博客
06-22 1万+
此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的，word、excel是直接下载、pdf浏览器打开的形式，如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。......
前端-内网（离线）环境（node环境、vue、vscode、elemntui）
04-21
内部有5个文件夹和一个word文档：1、element-ui为离线文件，打开其中的index.html文件即可使用 2、Microsoft VS Code文件直接安装vscode即可，.vscode为vscode的插件，安装步骤在步骤文件中 3、node_nvm为node多版本...
前端vue3实现本地及在线文件预览（含pdf/txt/mp3/mp4/docx/xlsx/pptx）
最新发布
Sylvasylva的博客
11-10 2万+
本地或内网预览需要借助插件实现，pdf、mp3、mp4等主要靠原生标签或浏览器自带功能，尽量减少了插件的安装。
五、JAVA调用海康威视SDK实现摄像头内网转外网并前端展示
02-14
java调用海康威视sdk摄像头推流到阿里云，并通过ckplayer进行网页播放
前端js下载txt文本
雨歌的博客
02-21 2956
前端js下载txt文本 ​ 在web应用开发中下载为文本比较少，但是对于一些小说网站应用应该会比较多的！ 闲话短说，直接上代码！ 1、将下面代码这个保存为一个xxx.js var saveAs = saveAs || (function(view) { "use strict"; // IE &lt;10 is explicitly unsupported if (typeof ...
前端Ａjax实现预览TXT文档（兼容UTF-8，ANCII,Unicode）
weiyuqingxin的博客
07-24 3499
最近在做文档的预览问题，在做txt的时候,原本是用HTML &lt;object&gt; 标签,但是读取的时候乱码，经查找资料，知道了原来txt文档默认的是ANCII编码，解决办法如下; 一、将ANCII转Unicode，但是没有成功， //ASCII 转换 Unicode function AsciiToUnicode(content) { result = ''; for...
在线阅读网站|基于Springboot+Vue开发实现小说阅读网站
BS009的博客
01-10 1658
在线名著网站主要给用户提供多种类型的名著进行阅读，用户可以根据自己的喜好，自行根据名著分类去查找自己喜欢阅读的书籍。同时还具有成为作者的机会，用户可以申请成为作者进行名著的编写。还可以根据名著章节的阅读量来获取该网站的虚拟币。本网站包含前后端功能，用户使用前台来阅读书籍，以及书籍的编写。后端管理员可以管理用户人员，审核名著，审核作者，提现审核，广告管理以及名著管理。
【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件
热门推荐
weixin_44590591的博客
05-30 4万+
Vue实现文档在线预览文档，在线预览PDF、Word、Excel和ppt等office文件
前端-实现小说阅读翻页(分页)功能
weixin_45532305的博客
11-05 7501
我是通过css3中的columns属性来让文章自动分页的。 通过MDN或w3c来了解columns属性有何作用。超链接 columns 属性是一个速记属性设置列宽和列数。 columns 是 column-width 与 column-count 的简写属性。 示例说明 columns: 100px 3; 当每列宽度大于 100px 时，就以 3 列分割显示；当浏览器宽度缩小，导致在 3 列情况下无法满足每列大于 100px，就开始转为 2 列；当浏览器再缩小，2 列中每列无法再保持 100px 每
Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流）
nihaoweixiao1的博客
12-24 1万+
Vue 预览word,excel,ppt等office文档-内网访问（基于onlyoffice，后端返回文件流
vue中读取文本文件内容_Vue 实现从文件中获取文本信息的方法详解
weixin_39595085的博客
12-20 2194
本文实例讲述了Vue 实现从文件中获取文本信息的方法。分享给大家供大家参考，具体如下：最近在使用vue做项目的时候，遇到一个需求，界面中需要显示大量的说明文字，为了保持界面的整洁和赶紧，决定采用单独的文件来存储显示信息，然后通过文件读取的方式显示到界面上。刚开始我使用的是File和FileReader对象获取，但是比较气人的是这两个对象是IE浏览器特有的属性，chrome不支持，而且为了安全起见，...
vue在线预览各类型文件
weixin_44694389的博客
05-26 9281
此文章是在vue-admin-template后台上做的功能 1.新建组件previewFile => index.vue <template> <div :class="['dialog-box',isCollapse?'analysis-dialog':'analysis']"> <el-dialog :title="`${file.title}文件预览`" :visible.sync="file.dialogVisible"
vue内网离线环境如何新增前端依赖
09-05
在Vue内网离线环境下新增前端依赖，可以按照以下步骤进行操作： 1. 确保内网环境已经搭建好，并且网络是关闭状态，即无法连接外网。 2. 在外网环境中使用npm或yarn等包管理工具，下载所需的前端依赖包，并将它们...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值