PDF预览、支持ie、谷歌等主流浏览器

PDFJS：详见本人资源列表（高版本pdfjs不支持低版本的ie）

将空间放在项目静态文件的根目录下，要不然访问服务端方法时404；

页面调用方式：

本人这个是通过后台返回文件流进行处理，所以需要调用服务端接口；

服务端方法：获取文件是从另一台服务器上请求，返回的是FileBase64的文件流；

/*** 展示pdf* @param id* @param response* @throws UnsupportedEncodingException*/@RequestMapping(value = "showSwfV1-{id}")public void showSwfUrlV1(@PathVariable("id") String id,HttpServletRequest request,HttpServletResponse response, ModelMap model) throws UnsupportedEncodingException {String getfileDataUrl= WSUtils.getProperty("dataOpenServiceUrl")+"/creditPromiseViewSwf";Map<String,String> param=new HashMap<String,String>();param.put("id",id);String data = "";try {//调用接口 接口文件的base64的文件流data=ApacheHttpUtils.postForm(getfileDataUrl,param);} catch (Exception e) {e.printStackTrace();}OutputStream outputStream=null;try {outputStream = response.getOutputStream();//将base64的文件流转换为输出流GenerateFile(data,outputStream);} catch (IOException e) {e.printStackTrace();}finally {IOUtils.closeQuietly(outputStream);}}//将base64的文件流转换为输出流public boolean GenerateFile(String data, OutputStream out) {if (data == null){return false;}BASE64Decoder decoder = new BASE64Decoder();try {// Base64解码byte[] b = decoder.decodeBuffer(data);for (int i = 0; i < b.length; ++i) {if (b[i] < 0) {b[i] += 256;}}out.write(b);out.flush();out.close();return true;} catch (Exception e) {return false;}}

接口提供方：

FileToBase64Utils工具类

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;public class FileToBase64Utils {public FileToBase64Utils() {}public static String encodeBase64File(String path) throws Exception {File file = new File(path);FileInputStream inputFile = new FileInputStream(file);byte[] buffer = new byte[(int)file.length()];inputFile.read(buffer);inputFile.close();return (new BASE64Encoder()).encode(buffer);}public static void decoderBase64File(String base64Code, String targetPath) throws Exception {byte[] buffer = (new BASE64Decoder()).decodeBuffer(base64Code);FileOutputStream out = new FileOutputStream(targetPath);out.write(buffer);out.close();}public static void toFile(String base64Code, String targetPath) throws Exception {byte[] buffer = base64Code.getBytes();FileOutputStream out = new FileOutputStream(targetPath);out.write(buffer);out.close();}public static void main(String[] args) {try {String base64Code = encodeBase64File("/Users/Crazy/Pictures/zyb2.jpg");System.out.println(base64Code);decoderBase64File(base64Code, "/Users/Crazy/Desktop/zyb.png");toFile(base64Code, "/Users/Crazy/Desktop/zyb.txt");} catch (Exception var2) {var2.printStackTrace();}}
}

页面需要一个下载功能，顺手记录下吧：

/*** 文件下载 调用外部接口 直接下载* @param request* @param response* @param model* @return*/
@RequestMapping(value = "/CreditPromiseDownLoadV1.jspx")
public void CreditPromiseDownLoadV1(@RequestParam String id,@RequestParam String fileName,HttpServletRequest request, HttpServletResponse response,ModelMap model) {try {fileName=URLDecoder.decode(fileName,"utf-8");} catch (UnsupportedEncodingException e1) {e1.printStackTrace();}String getfileDataUrl= WSUtils.getProperty("dataOpenServiceUrl")+"/creditPromiseViewSwf";Map<String,String> param=new HashMap<String,String>();param.put("id",id);String data = "";try {//调用接口 接口文件的base64的文件流data=ApacheHttpUtils.postForm(getfileDataUrl,param);} catch (Exception e) {e.printStackTrace();}OutputStream os = null;InputStream is = null;try {os = response.getOutputStream();response.reset();response.addHeader("Content-Disposition", "attachment; filename=\""+ new String(fileName.getBytes("gbk"),"iso-8859-1")+"\"");response.setContentType("application/octet-stream; charset=utf-8");GenerateFile(data,os);} catch (Exception e) {e.printStackTrace();}finally{IOUtils.closeQuietly(is);IOUtils.closeQuietly(os);}
}/*** 文件下载本地文件下载** @param request* @param response* @param model* @return*/
@RequestMapping(value = "/CreditPromiseDownLoad.jspx")
public void CreditPromiseDownLoad(@RequestParam String filePath,@RequestParam String fileName,HttpServletRequest request, HttpServletResponse response,ModelMap model) {try {fileName=URLDecoder.decode(fileName,"utf-8");filePath=URLDecoder.decode(filePath,"utf-8");} catch (UnsupportedEncodingException e1) {e1.printStackTrace();}OutputStream os = null;InputStream is = null;ZipOutputStream zos = null;try {os = response.getOutputStream();response.reset();String  promiseFile = WSUtils.getProperty("promiseFile");;File file = FileUtils.getFile("G:\\基础资料-西部资信\\学习资料\\Java并发编程实战.pdf");OutputStream out = response.getOutputStream();is =  new FileInputStream(file);response.addHeader("Content-Disposition", "attachment; filename=\""+ new String(fileName.getBytes("gbk"),"iso-8859-1")+"\"");response.setContentType("application/octet-stream; charset=utf-8");IOUtils.copy(is, os);} catch (Exception e) {e.printStackTrace();}finally{IOUtils.closeQuietly(is);IOUtils.closeQuietly(os);IOUtils.closeQuietly(zos);}
}

PDF预览、支持ie、谷歌等主流浏览器相关推荐

vue-pdf加载pdf文件预览支持分页
业务场景:根据需求开发根据左侧制度树点击切换右侧展示不同的附件pdf预览支持分页和下载,效果图如下一.准备工作执行npm install vue-pdf 安装 vue-pdf 二.使用方式 < ...
uni-app实现PDF预览功能（避坑看这）
目录前言一.下载PDF预览相关文件二.使用步骤前言去年就想写一篇关于uni-app的pdf预览功能,拖很久了,补上. 一.下载PDF预览相关文件下载地址解压后效果: 二.使用步骤在 ...
vue3 - 【完整源码】超详细实现网站 / H5 在线预览 pdf 文件功能，支持缩放、旋转、全屏预览、打印、下载、内容检索、主题色定制、侧边缩略图、页码跳转等等（最好用的pdf预览器，注释详细！）
效果图在 Vue3.js 项目中,实现了快速高效的 pdf 预览器工具组件,附带详细的使用教程与详细的注释,保证一键复制轻松搞定! 详细的注释很容易二次修改,很多实用功能,你也可以自定义界面上的样式 ...
vue的PDF预览插件(vue-pdf)，支持旋转、放大缩小、打印、下载等
PDF预览插件 1.安装插件(vue-pdf) 2.引用注册pdf组件 3.pdf 常用属性与方法调用 4.常见报错 1.安装插件(vue-pdf) npm i pdfjs-dist@2.5.207 ...
PDF 预览和下载你是怎么实现的？
在开发过程中要求对 PDF 类型的发票提供预览和下载功能,**PDF** 类型文件的来源又包括 H5 移动端和 **PC 端**,而针对这两个不同端的处理会有些许不同,下文会有所提及. 针对 ...
Android PDF原生实现 PDF阅读、PDF手势伸缩、PDF目录、PDF预览缩略图 PDF方案选择 google doc android-pdfview mupdf pdf.js x5
##1.背景近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开 ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
pdfh5.js 基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件。
pdfh5.js 基于pdf.js和jQuery,web/h5/移动端PDF预览手势缩放插件. 注意:本地绝对路径地址不能加载,跨域问题用代理或者服务端解决. svg模式渲染存在缺陷,只能渲染普通pd ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...

PDF预览、支持ie、谷歌等主流浏览器

PDF预览、支持ie、谷歌等主流浏览器相关推荐

最新文章

热门文章