不知道大家使用百度网盘的文件预览功能,f12看过控制台没有。









发现百度网盘使用的预览文件功能全是基于开源pdf .js的





接下来正题,我们在使用pdf.js默认是读取发布容器内部的文件,读取外部的文件需要自己实现,接下来拿读取桌面文件作为例子来展示。







实现原理:返回一个外部流文件给pdf.js实现加载预览文件。





步骤一:把pdf.js中的view.js中的改为DEFAULT_URL路径改为下载接口即可









效果:



步骤二:后端实现,这里后端是采用jersey,springmvc也是一样的原理





	@GET
@Path("/d")
@Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response download(@QueryParam("filemd5") String viFileMd5,@QueryParam("filename") String viFileName,@QueryParam("fileid") String viFileId,@Context HttpServletResponse response,@Context HttpServletRequest request) {
File nFile = null;
String nFileName = null;
try {
nFile = new File("C:\\Users\\Administrator\\Desktop\\test.pdf");
nFileName = URLEncoder.encode("大数据", "UTF-8");
response.setCharacterEncoding("UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
return Response.ok(nFile).header("Content-disposition","attachment;filename=" + nFileName+ ";filename*=utf-8''" + nFileName).header("Cache-Control", "no-cache").build();
}

使用pdf.js预览实现读取服务器外部文件的更多相关文章

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

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

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

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

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

    现在的浏览器基本都支持直接把pdf文件拖到浏览器就可以打开了,不用安装额外的插件.但是不同的浏览器显示的页面不一样.如果我们想在网页上统一预览pdf怎样实现呢? Mozilla开源了一个插件pdf.j ...

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

    问题: 在.netcore中使用pdf.js,pdf中有部分中文无法显示 在浏览器控制台发现有报错 发现在pdf.view.js中url路径异常,没有指向cmaps文件,于是调整了正确的相对路径 再次 ...

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

    Office在线预览及PDF在线预览的实现方式大集合 一.服务器先转换为PDF,再转换为SWF,最后通过网页加载Flash预览 微软方:利用Office2007以上版本的一个PDF插件SaveAsPD ...

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

    开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是这个想法,说干就干,实践过程总是艰难的,折腾了3 ...

  7. 动态PDF在线预览

    实战动态PDF在线预览及带签名的PDF文件转换 开篇语: 最近工作需要做一个借款合同,公司以前的合同都是通过app端下载,然后通过本地打开pdf文件,而喜欢创新的我,心想着为什么不能在线H5预览,正是 ...

  8. 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

  9. Aspose office (Excel,Word,PPT),PDF 在线预览

    前文: 做个备份,拿的是试用版的 Aspose,功能见标题 代码: /// <summary> /// Aspose office (Excel,Word,PPT),PDF 在线预览 // ...

随机推荐

  1. JS中this的四种用法

    1.在一般函数方法中使用 this 指代全局对象 2.作为对象方法调用,this 指代上级对象 3.作为构造函数调用,this 指代new 出的对象 4.apply 调用 ,apply方法作用是改变函 ...

  2. 变量新声明之let、const

    一.let 1.通过let声明变量不会变量声明提升 let a = 10; console.log( a ) 会报错 2. let a = 10; let a = 10; 会报错,(a 已被定义) 3 ...

  3. WEB实现单元格合并

    function merge_quadefect() { //可实现合并单元格,上下行来比较 //debugger; var totalCols = 7; 列数 var totalRows = $(& ...

  4. css: box-sizing

    border-box 宽度包含了边框 content-box 边框不包含在内容区中,会增加到实际的宽度中

  5. SQLServer “无法对数据库'XXX' 执行删除,因为它正用于复制”的解决方法

    “无法对数据库'XXX'执行删除,因为它正用于复制” 解决办法: 执行  sp_removedbreplication 'XXX'  这个语句的解释是:从数据库中删除所有复制对象,但不更新分发服务器上 ...

  6. Nginx动静分离负载均衡

    前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. Nginx.conf配置 # 定义Nginx运行的用户 和 用户组 如果对应服务器暴露在外 ...

  7. pwnable.kr-random-witeup

    看源代码. 可知,在linux下生成个随机数在于输入数异或等于固定值即可,而且吧, 随机数是固定的. 先得出随机数. random=1804289383 OK,接下来用计算器异或就行啦.0xB526F ...

  8. Python开发【第十一篇】:MySQL

    数据库介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库.每个数据库都有一个或多个不同的API用于创建.访问.管理.搜索和复制所保存的数据.每个数据库都有一个或多个不同的API ...

  9. django xadmin后台页面实现二级联动

    思路 先找到控件id ,这样就可以监听change事件 然后把自己写的js加入xadmin中 添加url和view,接受ajax请求和发送数据 第一步:找到联动上下级的ID 在浏览器中通过F12查看 ...

  10. 分布式系统-主键唯一id,订单编号生成-雪花算法-SnowFlake

    分布式系统下 我们每台设备(分布式系统-独立的应用空间-或者docker环境) * SnowFlake的优点是,整体上按照时间自增排序,并且整个分布式系统内不会产生ID碰撞(由数据中心ID和机器ID作 ...