原生js预览ofd文件
文章目录
- 进入正文
- 第一步-Clone
- 第二步-build
- 第三步-集成
我从网上看了好多文章,基本都是互抄的,但是,也给了我一个入门的提示,最起码知道
ofd
的基本用法。
如果是vue
中集成ofd
预览,那就没啥说的,网上的方法大概率就可以,直接集成git
仓库中的utils
文件即可。
那要是使用原生js
集成呢?直接把Utils
搬过来?保准不行。
有人说使用ofd.js的cdn,直接引入即可,好家伙,还是报错。
接下来,经过亲身实践,我来给各位提供一个可行的原生js
预览ofd
文件的方法.
仔细想想,如果原生js
都能预览了,那距离到使用vue
这种框架中集成还远吗?vue
中不会使用原生js
的包?不会吧不会吧!
进入正文
第一步-Clone
打开GitHub
或者Gitee
,那个有账号用哪个,因为要下载包。
ofd-github ofd-gitee
然后,将项目clone
下来。
然后,然后就是常规操作了兄弟:
- 编辑器打开项目,下载项目依赖
npm install
- 看
package.json
,运行项目应该是npm run serve
,具体以实际的package.json
中的script
脚本为准。
如果能运行起来,那就说明OK
,依赖下载什么的没得问题。
第二步-build
重要的步骤来了,package.json
中有一行脚本:
"scripts": {"lib": "vue-cli-service build --target lib --name ofd --dest lib ./src/utils/ofd/ofd.js"
}
没错,执行它npm run lib
脚本执行完成后,会自动在项目根目录下生成一个lib
文件夹,里面是打包后ofd
的js
文件,以及一个demo.html
。
打开demo.html
我们会发现,其内容异常简单,有用的代码就一行,即:<script src="./ofd.umd.js"></script>
,这告诉我们,如果我们要用ofd.js
,那你就需要在你的html
文件内引入ofd.umd.js
文件。
OK,接下来就是写代码时间了。
第三步-集成
怎么集成?
首先,将打包后的
lib
文件夹,整个搬迁到我们的项目下。在
html
文件中,引入ofd.umd.js
或者ofd.umd.min.js
<script src="./lib/ofd/ofd.umd.min.js"></script>
然后,定义一个
[type=file]Input
来选择ofd
文件,再定义一个容器,用来展示渲染的ofd
文件<body><input type="file" ref="file" class="hidden" accept=".ofd" onchange="fileChanged(event)" /><div id="ofdContainer" style="width:100%;height:800px;"></div> </body>
最后就是
js
了function fileChanged(e) {// 获取文件数据const file = e.target.files[0];// 转换ofd文档ofd.parseOfdDocument({ofd: file,success: function (res) {const screenWidth = 800;const ofdRenderRes = ofd.renderOfd(screenWidth, res[0]);let ofdContainerDiv = document.getElementById('ofdContainer');// 清空元素ofdContainerDiv.innerHTML = '';for (const item of ofdRenderRes) {ofdContainerDiv.appendChild(item);}},fail: function(err){console.error('ofd文件渲染失败',err);}}); }
到此为止,原生js
渲染ofd
就完成了。
有些时候网上给出的某些函数的用法,可能会与我们再实际使用的时候有些冲突,遇到那个函数不会用,直接去ofd.umd.js
中去搜索对应的函数名,看看用法即可。
原生js预览ofd文件相关推荐
- 原生js预览ofd文件,JavaScript
最近项目需要预览ofd文件,于是上网搜索了一下相关知识,结果大感失望,内容很少而且没有什么用,最后根据一个博客找到了方法和总结,话不多说上代码. <!DOCTYPE html> <h ...
- vue项目中使用pdf.js预览pdf文件
项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js, 但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs ...
- ElementUI项目使用pdf.js预览pdf文件
最近因为要用Elementui展示pdf文件.查了很多资料,发现vue-pdf还比较初级,不如pdf.js成熟.所以使用的pdf.js. 1.下载pdf.js 点击这里可以[下载]. 2.解压 打开e ...
- 解决viewer.js预览PDF文件 无法展示PDF水印的问题
前言 最近在做一个关于pdf文件水印相关的需求. 关于上传文件增加水印的解决在这篇博客<给PDF添加水印工具类(JAVA实现)>已经提供了工具类. 但是在预览上传后已有水印的文件时,发现水 ...
- PDF.js 预览pdf文件流预览pdf,及ie浏览器兼容性问题,解决方案!!(开发笔记)
一. 官网下载pdf.js :Getting Started 注意: 这俩包 都不支持ie,因为用的是es6,ie解析不出来 下完以后引进去.下面为省事 找几个市面上常用的方法: 1.文件流转base ...
- vue项目中预览pdf文件
一.利用浏览器自带的预览pdf // [pdfUrl] 获取pdf地址 eg:http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pl ...
- 使用PDF.js实现前端和手机端网页预览PDF文件(可定制,支持本地文件、Base64编码和远程URL跨域方式)
1.插件下载地址:https://mozilla.github.io/pdf.js/ 下载后解压pdfjs-1.10.88-dist.zip文件后得到: 2.把pdfjs-1.10.88-dist放到 ...
- VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索,在iframe中获取选中文字,监听鼠标事件,右键菜单
一.VUE预览PDF文件并利用pdf.js获取鼠标选中的文字和搜索 需求实现:vue实现预览pdf文件,获取到鼠标选中的文字数据.调用pdf.js自带的搜索方法实现搜索功能(后期可以调用该接口满足其他 ...
- springboot整合pdf.js实现在线预览pdf文件
今天在项目中实现pdf在线预览的功能的如图, 通过百度,查询合适的方法,最为简单的的是通过pdf.js的插件在前台展示.本以为是挺容易实现的,但都有莫名其妙的错误. 第一步:下载源码https://g ...
- js在线预览pdf文件
js在线预览PDF文件 一.效果预览 二.实现代码: <html> <head> <meta http-equiv="Content-Type" co ...
最新文章
- python 列表表达式 if_python中if else如何判断表达式成立?
- python菜鸟编程-Python3 函数
- 使用TFS CI/CD 完成 VSTS 插件自动化部署和发布
- Spark SQL(七)之基于用户的相似度公式
- React单元测试:Jest + Enzyme(二)
- Oracle 20c 新特性:Online SecureFiles Defragmentation 在线的 LOB 碎片整理
- python itertools卡死_Python使用itertools模块来解决算法问题,python
- Animoca Brands 旗下子公司 GAMEE 将于 4 月 2 日启动公募
- spring aop实例讲解_【好好面试】手把手调试,教你分析Spring-Aop
- 【leetcode】557. 反转字符串中的单词 III-原地算法
- freebsd mysql utf8_FreeBSD环境下Mysql问题解决方法集锦
- Map的实现类中,哪些是有序的,哪些是无序的
- JQuery实现灯箱特效
- python批量查询ip归属地_python查询ip归属地
- html5淘宝注册界面设计,电商登陆注册页设计分析
- 计算机网络自顶向下方法(二)——应用层
- 内网 NTP 服务自动对时,ikuai 软路由 ntp 对时方案
- linux syslog原理,Linux日志管理之詳解 syslog/vsyslog
- 通过HFS低成本搭建NAS,并内网穿透实现公网访问 2/2
- CDH5.7.6-CentOS6安装