前端知识框架 前端知识框架
首页
基础
框架
插件
Node
地图
更多
前端须知
  • 分类
  • 标签
  • 归档

BestIdea

首页
基础
框架
插件
Node
地图
更多
前端须知
  • 分类
  • 标签
  • 归档
  • JointJS入门
  • lottie动态图标以及超图中的使用
  • js实现前端pdf预览
  • js实现预览简版
  • 富文本实现图片粘贴
  • 移动端表单组件点击延迟问题解决办法
  • 在线预览解决方案
    • 在线预览解决方案(前期调研)
    • 实施方案后端部署kekingcn-file-online-preview-master.
      • 文件预览服务部署方法
      • 前端调用方法
  • antv-x6 入门
  • antv-g2入门
  • antv-g2Plot
  • antv-s2 入门
  • antv-l7Plot
  • avtv-f2入门
  • Vue实现pdf、doc、txt、xlsx等的预览
  • micro-app使用
  • VueUse使用
  • webpack打包替换类名命名空间
  • 插件
Btzh
2022-03-26
目录

在线预览解决方案

# 在线预览解决方案(前期调研)

# 1、第三方服务在线转换、永中云转换SaaS服务

提供文档URL 在线预览(内网环境无法使用)

word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提:资源必须是公共可访问的)

<iframe src='http://view.xdocin.com/xdoc?_xdoc=文件服务文档地址' frameborder='0'></iframe>

// 微软在线转换地址 https://view.officeapps.live.com/op/view.aspx?src=文件地址
// xdoc在线地址 http://view.xdocin.com/xdoc?_xdoc=文件服务文档地址'
1
2
3
4

# 2、利用后端将文件转为图片或pdf格式,前端以图片形式预览

PDFJS: https://mozilla.github.io/pdf.js/ (opens new window) 支持获取文件流到客户端,生成blob地址预览

ViewerJS: http://viewerjs.org/ 预览pdf文件,其pdf文件只能url地址

# 3、购买部署预览服务例如百度DOC文档服务、永中、I DOC VIEW等

# 实施方案后端部署kekingcn-file-online-preview-master.

# 文件预览服务部署方法

1、上传kekingcn-file-online-preview-master.zip到服务器,解压

2、cd 到 jodconverter-web 文件夹下的 src\main\bin\,运行 startup.sh 即可,默认端口8012

# 前端调用方法

1.普通文件下载url预览

如果你的项目需要接入文件预览项目,达到对docx、excel、ppt、jpg等文件的预览效果,那么通过在你的项目中加入下面的代码就可以 成功实现:

var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(url));
1
2

2. http/https下载流url预览

很多系统内不是直接暴露文件下载地址,而是请求通过id、code等参数到通过统一的接口,后端通过id或code等参数定位文件,再通过OutputStream输出下载,此时下载url是不带文件后缀名的,预览时需要拿到文件名,传一个参数fullfilename=xxx.xxx来指定文件名,示例如下:

var originUrl = 'http://127.0.0.1:8080/filedownload?fileId=1'; //要预览文件的访问地址
var previewUrl = originUrl + '&fullfilename=test.txt'
window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(previewUrl));
1
2
3
上次更新: 2022/05/05, 17:47:41
移动端表单组件点击延迟问题解决办法
antv-x6 入门

← 移动端表单组件点击延迟问题解决办法 antv-x6 入门→

最近更新
01
webpack打包替换类名命名空间
05-01
02
Vite常用配置
02-26
03
crypto前端加密
01-18
更多文章>
Theme by Vdoing | Copyright © 2022-2024
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式