react-pdf-js预览不展示章

react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项

react框架下,在页面内加载显示PDF文件,关于react-pdf-js的使用注意事项之前做了一个需求,在注册账号的时候,让用户同意服务条款, 服务条款是一个PDF文件, 这就需要在react内加载PDF文件的插件了,今天特地做一个总结我用的版本是4.0.1 然后在页面内引入 import PDF from 'react-pdf-js'; 然后在需要的地方直接使用标签就行了 page参数是加载的PDF的第几页,可以通过更改page的数字完成翻页的功能原本的想法是加载所有页,然后用户滚动条

使用pdf.js预览实现读取服务器外部文件

不知道大家使用百度网盘的文件预览功能,f12看过控制台没有. 发现百度网盘使用的预览文件功能全是基于开源pdf .js的接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件需要自己实现,接下来拿读取桌面文件作为例子来展示. 实现原理:返回一个外部流文件给pdf.js实现加载预览文件. 步骤一:把pdf.js中的view.js中的改为DEFAULT_URL路径改为下载接口即可效果: 步骤二:后端实现,这里后端是采用jersey,springmvc也是一样的原理 @GE

[pdf.js]预览pdf时，中文名称乱码的问题

在项目中使用了pdf.js的方式预览pdf,但针对中文名称的时候会出现乱码,导致找不到该文件而出现错误. 解决办法 <script src="viewer.js" charset="gb2312"></script> 结果

前端使用pdf.js预览pdf文件

现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在浏览器上显示pdf文档.唯一的要求就是浏览器必须支持HTML5.使用方法: 1. 下载https://github.com/mozilla/pdf.js/archive/gh-pages.zip 2. 解压到目录pdf,再把整个目录拷贝到网站的public目录下.解压后是

前端使用pdf.js预览pdf文件,超级简单

现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.js,无需任何本地支持就可以在浏览器上显示pdf文档.唯一的要求就是浏览器必须支持HTML5.使用方法: 1. PDF.js 可以在官网上下载:http://mozilla.github.io/pdf.js/ 2. 解压到目录pdf,再把整个目录拷贝到网站的public目录下.解压后是这样的: 3.

pdf.js 预览文件中文内容丢失

问题: 在.netcore中使用pdf.js,pdf中有部分中文无法显示在浏览器控制台发现有报错发现在pdf.view.js中url路径异常,没有指向cmaps文件,于是调整了正确的相对路径再次请求,依旧404.再通过观察其他的js文件的路径,路径没有问题.最后发现是系统没有为我们提供处理的文件类型无法使用,有些需要自己手动添加,在Startup中Configure添加如下代码: var contentTypeProvider = new FileExtensionContentTypeP

实战动态PDF在线预览及带签名的PDF文件转换

开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3,4天的时间,熬了两个凌晨3,4点,其中的艰辛.以及各中的曲折.压力只有自己能体会,项目上线后心里想着我要写一篇博文,一是总结一下经验,其次就是和大家分享自己这一路走来的的心得体会,欢迎吐槽!,废话不多说,来点干货! PDF在线预览实现: 8个实现在线浏览PDF文件的实用插件,笔者选择pdf.js,

动态PDF在线预览

实战动态PDF在线预览及带签名的PDF文件转换开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3,4天的时间,熬了两个凌晨3,4点,其中的艰辛.以及各中的曲折.压力只有自己能体会,项目上线后心里想着我要写一篇博文,一是总结一下经验,其次就是和大家分享自己这一路走来的的心得体会,欢迎吐槽!,废话不多说,来点干货! PDF在线预览实现: 8个实现在线

Aspose office （Excel,Word,PPT）,PDF 在线预览

前文: 做个备份,拿的是试用版的 Aspose,功能见标题代码: /// <summary> /// Aspose office (Excel,Word,PPT),PDF 在线预览 /// </summary> /// <param name="sourceDoc">需要预览的文件地址</param> /// <param name="saveDoc">展示的html文件地址</param>

图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码

图片上传代码,支持同步/异步和图片的预览主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容IE8 dataType使用text类型,json类型IE8会当作文件提示下载,不走回调函数.使用JS预览. 废话不多说,直接上代码了. testupload

Office在线预览及PDF在线预览的实现方式史上最全大集合

Office在线预览及PDF在线预览的实现方式大集合一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览微软方:利用Office2007以上版本的一个PDF插件SaveAsPDFandXPS.exe可以导出PDF文件,然后再利用免费的swftools.exe工具生成swf格式的Flash文件,网页中加载flexpaper免费开源工具(有广告)实现Flash文件的预览.优点:1.有效的保护的源文件及文件的复制,不可复制也是缺点.2.源码是自己的,版权有保证.缺点:1.服务器

java实现word转pdf在线预览（前端使用PDF.js；后端使用openoffice、aspose）

背景之前一直是用户点击下载word文件到本地,然后使用office或者wps打开.需求优化,要实现可以直接在线预览,无需下载到本地然后再打开. 随后开始上网找资料,网上资料一大堆,方案也各有不同,大概有这么几种方案: 1.word转html然后转pdf 2.Openoffice + swftools + Flexmapper + jodconverter 3.kkFileView 分析之后最后决定使用Openoffice+PDF.js方式实现环境搭建 1.安装Openoffice,下载地址:

js预览PDF的插件（亲测支持IE9，火狐，等等）

aspx文件 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&

Vue PDF文件预览vue-pdf

最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,GitHub地址:https://github.com/FranckFreiburger/vue-pdf#readme 不过一般GitHub上的注释比较简洁,所以这里把自己实际使用的过程总结了一下,下面贴代码引用: npm install --save vue-pdf template代码: <template> <

PDF文件预览和下载

背景:项目中实现pdf文件的预览以及下载环境:jdk1.8.SpringBoot2.0.Maven PDF.js下载地址将下载的源码拷入项目中修改viewer.js: 将defaultUrl: { value: 'compressed.tracemonkey-pldi-09.pdf',---此处是默认的pdf的路径 kind: OptionKind.VIEWER } 修改为: defaultUrl: { value: '', kind: Option

pdf 在线预览之 pdfobject插件

支持到ie9 可以不用安装如果安装 npm i pdfobject 第一步:引入pdfObject包申明一个变量 const { PDFObject } = require("../../assets/js/pdfobject"); 组件中:写一个存放的位置 <div id="pdfContent"></div> js中: 这个插件兼容谷歌但是兼容ie的前提下是该浏览器支持pdf在线阅读可以支持到ie9 亲测可用所以js中先来一

java原装代码完成pdf在线预览和pdf打印及下载

这是我在工作中,遇到这样需求,完成需求后,总结的成果,就当做是工作笔记,以免日后忘记,当然,能帮助到别人是最好的啦! 下面进入正题: 前提准备: 1. 项目中至少需要引入的jar包,注意版本: a) core-renderer.jar b) freemarker-2.3.16.jar c) iText-2.0.8.jar d) iTextAsian.jar 上代码: 注释: 此类为自定义的Tag类的基类,在action中怎么放的数据,在ftl中就怎么取数据,简洁明了. 1. 自定义Tag类的基类

java 文件转成pdf文件预览

一.前端代码 //预览功能 preview: function () { //判断选中状态 var ids =""; var num = 0; $(".checkbox").each(function () { if($(this).is(':checked')){ ids +=$(this).val() + ","; num++; } }); if(num <=0 ){ toastr.error('请选择需要预览的文件!'); retur

记一次关于pdf 下载需求变更到 pdf 在线预览

背景: 之前的需求是根据接口中提供的Blob数据实现PDF下载,已实现代码如下: 1 const url = window.URL.createObjectURL(newBlob([response.data],{type: 'application/pdf'}) 2 const link = document.createElement('a') 3 link.href = url 4 let filename = response['headers']['content-dispositio

[Asp.net]常见word，excel，ppt，pdf在线预览方案，有图有真相，总有一款适合你！

引言之前项目需要,查找了office文档在线预览的解决方案,顺便记录一下,方便以后查询. 方案一直接在浏览器中打开Office文档在页面上的链接.会弹出如下窗口: 优点:主流浏览器都支持. 缺点:Office文档链接在浏览器中打开,会有如上图的提示,需用户自己选择打开或者保存功能,如果客户电脑上安装迅雷下载软件,会启动迅雷下载,用户体验不好. 方案二 office文档转html,首先引入com组件中office库,然后在程序集扩展中引入word,excel,ppt的dll. 然后F6生成,会

[Asp.net]常见word，excel，ppt，pdf在线预览方案(转)

引言之前项目需要,查找了office文档在线预览的解决方案,顺便记录一下,方便以后查询. 方案一直接在浏览器中打开Office文档在页面上的链接.会弹出如下窗口: 优点:主流浏览器都支持. 缺点:Office文档链接在浏览器中打开,会有如上图的提示,需用户自己选择打开或者保存功能,如果客户电脑上安装迅雷下载软件,会启动迅雷下载,用户体验不好. 方案二 office文档转html,首先引入com组件中office库,然后在程序集扩展中引入word,excel,ppt的dll. 然后F6生成,会

react-pdf-js预览不展示章

热门专题