1. 下载地址：
pdf.js 下载链接：https://pan.baidu.com/s/1sax0GNA_Y6XWNo19cwXJHA
提取码：78jz
2. 任务描述：
从接口返回处拿到了 pdf 编译成的 base64 编码，实现在前台预览 pdf 文件；
3. 测试流程：
这边提供了 pdf 文件转 base64 编码的方法；
1）利用 pdfToBase64String 方法将本地 pdf 文件转成 base64 编码；
2）利用 base64StringToPdf 方法将 base64编码 转成 pdf 文件，并获取 pdf 文件的输出流 ；（获取文件输出流后，删除了本地 pdf 文件，留意下）
3）在 JS 中利用 pdf.js 实现 pdf 文件的预览。
4. 代码内容：
1）pdf 转成 base64 编码方法，filePath 指定文件路径
@RequestMapping(value = “/pdfToBase64String”)
@ResponseBody
public String pdfToBase64String(String filePath) {
//文件输入流
FileInputStream fin = null;
//缓冲输入流
BufferedInputStream bin = null;
ByteArrayOutputStream baos;
//缓冲输出流
BufferedOutputStream bout = null;
String a = null;
try {
//TODO 实例化 .pdf文件 对象
File file = new File(filePath);
//建立读取文件的文件输出流
fin = new FileInputStream(file);
//在文件输出流上安装节点流（更大效率读取）
bin = new BufferedInputStream(fin);
// 创建一个新的 byte 数组输出流，它具有指定大小的缓冲区容量
baos = new ByteArrayOutputStream();
//创建一个新的缓冲输出流，以将数据写入指定的底层输出流
bout = new BufferedOutputStream(baos);
byte[] buffer = new byte[1024];
int len = bin.read(buffer);
while (len != -1) {
bout.write(buffer, 0, len);
len = bin.read(buffer);
}
//刷新此输出流并强制写出所有缓冲的输出字节，必须这行代码，否则有可能有问题
bout.flush();
byte[] bytes = baos.toByteArray();
//apache公司的API
String base64 = Base64.encode(bytes);
return base64;
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
fin.close();
bin.close();
//关闭 ByteArrayOutputStream 无效。此类中的方法在关闭此流后仍可被调用，而不会产生任何 IOException
//baos.close();
bout.close();
} catch (IOException e) {
e.printStackTrace();
}
}
return null;
}
2）base64 编码转成 pdf 方法
@RequestMapping(value = “/base64StringToPdf”)
public void base64StringToPdf(String base64Content,String filePath,HttpServletResponse response)
//创建指定文件的输出流
fos = new FileOutputStream(file);
//为文件输出流对接缓冲输出流对象
bos = new BufferedOutputStream(fos);
byte[] buffer = new byte[1024];
int length = bis.read(buffer);
while (length != -1) {
bos.write(buffer, 0, length);
length = bis.read(buffer);
}
// 刷新此输出流并强制写出所有缓冲的输出字节，必须这行代码，否则有可能有问
bos.flush();
} catch (Exception e) {
e.printStackTrace();
} finally
if (fos != null) {
fos.close();
}
if (bos != null) {
bos.close();
}
//TODO 将.pdf文件放到输出流中
try
} catch (Exception e) {
e.printStackTrace();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
3）前端 HTML 文件，利用 iframe ,指定 src 的路径
4）Js文件，这边可能需要根据自身的实际情况改动
//预览接口
doPreview:function () {
//获取 pdf 文件的输出流，对应 Java 后台的方法
let url = ctx + '/base64StringToPdf';
debugger
console.log(url)
//从缓冲输出流中获取
//这个 viewer.html 是 pdf.js 里面的
$('#pdfPrint')[0].src = ctx + '/static/js/pdf/web/viewer.html'+'?file='+ url;
},
//pdf 转 base64 接口
btnPdfToBase64:function () {
let filePath = “D:\测试.pdf”;
//这边是调用后台方法，这边需要自己根据情况修改
inDataService.pdfToBase64String({filePath:filePath}).then(data =>{
console.log(data)
})
},
5. 效果图：
6. 缺陷：
利用 pdf.js 实现 pdf 文件的预览效果还是挺好的，唯一的遗憾就是打印的效果图不清晰，据说是因为游览器的原因。
注：有些注释可能不够权威，大家发现错误后希望提醒我！
