组件分享之前端组件——基于pdf.js在线预览PDF文件 背景 近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件...组件基本信息 组件：pdf.js 开源协议：Apache-2.0 许可证 使用与下载：https://mozilla.github.io/pdf.js/ 内容 本次分享的组件是用于在浏览器中在线查看...下面是其开源库中的描述内容： PDF.js是使用 HTML5 构建的可移植文档格式 (PDF) 查看器。 PDF.js 由社区驱动并受 Mozilla 支持。...1、创建一个html页面，并在其中增加如下代码 PDF.js '.../canvas> 2、增加如下CSS样式 #the-canvas { border: 1px solid black; direction: ltr; } 3、在js中增加如下代码进行加载需要在线展示的
hexo 有各种支持pdf的查看方案，但大多不同时支持移动端和PC端，本文记录使用 pdf.js 实现各设备查看 pdf 的方法。...简介 pdf.js 是用于解析和呈现 PDF 的基于 Web 标准平台的通用解决方案，功能强大。...官方网站：https://mozilla.github.io/pdf.js/ 下载 pdf.js 官网地址：https://mozilla.github.io/pdf.js/ 新版本不支持部分浏览器，为了更好的兼容性...viewer.js 文件中的相应内容： 加入主题 将下载文件夹命名为 pdfjs，拷贝到 themes/fluid/source/js 中 使用方法 在markdown 文档中使用 控件配合pdf.js...;height:100%'> src-to-pdf：为 pdf 文件的链接 style 可以根据实际需求适当调整 示例 参考资料 https://mozilla.github.io/pdf.js
第一步：下载源码https://github.com/mozilla/pdf.js 第二步：将源码拷贝进项目中，可以新建一个PDFShow文件夹存放代码 第三步：修改viewer.js var DEFAULT_URL...07-13 13:01的分割线------------------------------- 文章年久失修，使用案例可参阅官方Demo 插件官方的例子：http://mozilla.github.io/pdf.js
1.实现方式和效果 前段时间需要做一个在PC端预览移动端的功能，由于我是前端不太好，就在网上查找资料，花了半天的时间终于有所收获，在这里把我的实现代码分享给大家。...想要在PC端实现模拟手机环境的预览效果，一般有两种方法，一种通过iframe实现，一种通过div实现的，这里我选择了后者。实现的效果如下： ?...Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/>").prependTo('body'); //添加移动预览的... 手机预览 </
使用步骤： 1.复制这三个东西到assets目录下 2.如下配置Webview fun initWebSettings() { //去掉横向滚...
1、前言： 新接手一个老项目，需要改造pdf文件的预览效果，接口直接返回的pdf文件的文件流base64字符串，前端只能拿到base64来进行预览。...pdf.js是一款非常优秀的pdf解析工具，但不支持直接预览文件流，这里需要对pdf.js稍微改造。...2、下载pdf.js 下载地址：https://mozilla.github.io/pdf.js/ 下载稳定版本，下载后解压，把他放在静态资源目录下面，我这里的项目是老项目，前后端么有分离的java项目...webapp下面，我把下载以后的文件解压重新命名为pdfjs文件夹，如图 3、保存pdf文件流 我这里是一个接口返回包括内容详情，图片，pdf文件等所有内容，点击一条pdf记录，跳转打开新的标签页进行预览...title.split(" ")[0] }, 5.2 修改viewer.js.map 打开viewer.js.map，搜索defaultUrl，把value更改为【DEFAULT_URL】，如图： 最后pdf预览如图
为什么要用在线字体 问题 精灵图（雪碧图）用作背景的时候不能轻易的放大缩小。...低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求 在线字体带来的革命： 在线字体本质就是文字，但是也可是像图形的文字。...在线字体本身是矢量的，放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....自定义字体在线工具 有很多可以直接在线编辑和上传自定义字体的工具和网站。其中：icomoon就是比较常用的一个在线制作字体的网站。有很多免费的字体可以用，而且可以在线编辑和上传。 ?...此在线工具可以选择图标、增加图标、修改图标、移动图标、上传图标等操作，操作完成后选择要下载的图标然后选择右下角的生成字体，然后就可以下载字体了。
最近客户有个需求，需要在线预览PPT、Excel、Word,开始打算用第三方组建去读取 office系列，然后生成html,这样的话样式相当于丢了，只剩下数据，而且第三方组件对office版本支持不够完善...最后决定，用户在上传的过程中调用office API里面的saveAs，自动生成了静态html,预览的时候就直接访问的该html页面。 ?
由于格式比较新，能直接预览的工具并不多。如果你也存在同样的困扰，可以试试XDOC的文档在线预览服务。...本地文件预览打开https://ofd.xdocin.com，选择本地OFD文件，如下图：图片点击预览按钮，结果如下图：图片在线文档预览调用方法：https://ofd.xdocin.com/view?
背景 系统需要预览在线word、excel、pdf等文件 ，pdf还好，word和excel就不太友好了，需要下载下来，文件少还行，多了，用户就很烦，下载了还得人工删除 。...所以找了一个可以直接在线预览的文案。...-p 8012:8012 keking/kkfileview:4.1.0 浏览器访问容器8012端口 http://127.0.0.1:8012 即可看到项目演示用首页 项目接入使用 当您的项目内需要预览文件时...，只需要调用浏览器打开本项目的预览接口，并传入须要预览文件的url，示例如下： 3.x.x 及以上版本 #[1] var url = 'http://127.0.0.1:8080/file/test.txt'; //要预览文件的访问地址
凯京科技内部文件，严禁外泄} #如需取消水印，内容设置为空即可，例：watermark.txt = ${WATERMARK_TXT:} watermark.txt = ${WATERMARK_TXT:小鑫同学在线
为什么要用在线字体 问题 精灵图（雪碧图）用作背景的时候不能轻易的放大缩小。...低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求 在线字体带来的革命： 在线字体本质就是文字，但是也可是像图形的文字。...在线字体本身是矢量的，放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....自定义字体在线工具 有很多可以直接在线编辑和上传自定义字体的工具和网站。其中：icomoon就是比较常用的一个在线制作字体的网站。有很多免费的字体可以用，而且可以在线编辑和上传。...此在线工具可以选择图标、增加图标、修改图标、移动图标、上传图标等操作，操作完成后选择要下载的图标然后选择右下角的生成字体，然后就可以下载字体了。
背景 最近公司内部oa系统升级，需要增加文件在线预览服务，最常见的文件就是office文档，一开始构思几个方案，比如office软件自带的文件转换，openoffice转换，offce365服务，aspose...组件转换，最终采用了aspose转换，原因是组件功能完善，不依赖其它软件安装环境 系统设计 文件类型及方案 文件类型 预览方案 word aspsoe-word转换图片预览（版本21.1） ppt aspose-slides...转化你图片预览（版本20.4） excel aspose-cell转换html预览（版本20.4） pdf pdfbox缓缓图片预览（版本2.0.15） png，jpg，gif 整合viewer.js预览...（版本1.5.0） mp4 整合vedio.js预览（js版本7.10.2） txt 读取文件内容预览 注：aspose因版权问题，工程示例代码中全部使用试用版，转换图片会出现水印 流程设计 系统实现...file=（文件地址） 文件地址支持文件访问路径与流输出 项目源码地址 https://gitee.com/code2roc/fast-preview 预览界面 word excel ppt pdf
既然是WEB应用，进一步的需求是能够在线查看文档，根据用户需求可能不允许下载，不允许打印文档。...另外一个解决方案是在线文档预览，用户在网页中查看文档内容，用户无需拿到原始文档，如果有权限的话，可以允许用户下载文档。这就就是百度文库，豆丁之类的网站的功能。下面来说说怎么实现。... catch (Exception ex) { error = ex.StackTrace; return false; } } 2.在线预览...pdf文档 前面已经统一转换为pdf文档，接下来就是对pdf的在线预览。...pdf.js网站已经提供了库和示例，浏览页面是http://mozilla.github.io/pdf.js/web/viewer.html，我们要打开我们转换的文件，只需要在URL中添加参数即可： /
---- Blog新添加书籍页面,方便在线阅读,使用了jquery.media.js -----------------来自小马哥的故事 ---- html 代码如下 <!...}); PDF File 查看预览
移动端H5 QQ在线客服链接代码 <a href="mqqwpa://im/chat?...<em>移动</em><em>端</em>H5 QQ群<em>在线</em>客服链接代码 <a href="mqqapi://card/show_pslcard?
1.移动端视口问题 视口是指浏览器的可视区域，移动端的视口到底是多宽呢？ 现在市面上的大部分手机，比如iphone X，它的默认视口宽度为980px，而一个iphone X的屏幕宽度仅仅为375px。...(注：实际上，这里说的375像素不是真实的物理像素，至于这个375像素是怎么来的，以及为什么大部分移动端的默认视口宽度是980，这就是另一个更加复杂的话题了，在此我们先不做讨论。)...我们可以使用谷歌浏览器的移动端调试工具，来访问百度的搜索结果，可以看到网页明显被缩小了，而且页面宽度定格在980px(不信的话大家可以试试)。...3.移动端尺寸 是同一个网页在不同尺寸手机中的效果。...注意：在移动端，如果使用了背景图(比如雪碧图)，记得用同样的方式调整背景图的尺寸。 题外话：移动端看上去是不是很麻烦？视口那么小，还要引入各种东西，里面要添加的又杂又乱，还要计算数值，是不是很麻烦？
有时候我们不仅需要文件存储，还需要文件的在线预览。这里给大家推荐一个基于SpringBoot的文件预览神器kkFileView，基本支持主流文件的在线预览，使用也很简单，希望对大家有所帮助！...kkFileView简介 kkFileView可以用来搭建文件在线预览服务，在Github上已有5.7k+Star。...，我们来看下在线预览文件的URL格式，只需传入url（需要预览的文件地址）即可，这里要注意的是这个url需要进行base64编码才可以； http://192.168.7.109:8012/onlinePreview...总结 通过对kkFileView的一波实践，我们发现kkFileView可以满足Office文档、视频、图片等主流文件的在线预览需求，使用和配置也非常简单。...由于它是通过将word、ppt文档转化为pdf来实现预览的，如果你对Office文档预览没有特别高的要求，完全可以使用它搭建一个全能的文件在线预览服务！
地址：https://usdoc.cn Office文件在线预览是目前移动化办公的一种新趋势。Office在线预览指的是Office系列的文件在线查看而不依附域客户端的存在。...usdoc文档在线服务正是为了解决这一问题而做出了优化的访问，充分发挥了前后端结合的优势，提供更好的阅读体验特点 1、不依赖于客户端独立运用，只需要一个url文件地址就可以预览。...2、在服务器端对源文件进行读取操作，彻底解决了浏览器端的跨域读取问题。 3、支持文件地址加密解密处理，保护文档隐私。...4、不用在服务器端部署、浏览者不用客户端下载，仅仅使用浏览器就可以实现。 5、支持跨域，支持所有设备以及浏览器。客户端使用任何浏览器（包括移动设备上的）、微信都可以预览。...支持Microsoft Office、WPS及Adobe PDF文档在线预览支持PC端、移动端、Mac电脑等文件地址可加密集成很简单，三行代码既可以搞定预览调用方法 https://vw.usdoc.cn
[React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能] 本文完整版：《React 实现 PDF 文件在线预览 - 手把手教你写 React PDF 预览功能》 在...React 项目中，很多场景都需要 PDF 文件预览功能，比如合同 ERP，销售CRM，内部文档 CMS 管理系统，都需要内置 PDF 文件在线预览功能。...跟随本教程学习完成后，你会搭出以下 PDF 在线预览效果的 React PDF 预览组件 [React PDFjs 搭建效果] 如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云，卡拉云是新一代低代码开发工具...│ └── PDFRender │ └── index.tsx ├── main.tsx ├── App.tsx └── vite-env.d.ts 推荐阅读《5种 开源 react 移动端...pages.current, previewUrls: previewUrls.current, } } 扩展阅读《React Echarts 使用教程 - 如何在 React 加入图表 》 React PDF 在线预览源代码
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
云直播
