本文目录一览：
- 1、JS 怎么读取二进制文件
- 2、Vue中前端接收二进制文件流实现预览PDF
- 3、java 数据库中2进制流image转成PDF
- 4、js实现各种文件下载，文件类型包括word、excel、exe、pdf、txt、jpg等等
- 5、使用js下载保存pdf文件
JS 怎么读取二进制文件
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.
readAsBinaryString()
读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含所读取文件的原始二进制数据.
Vue中前端接收二进制文件流实现预览PDF
1、后台Controller代码
@GetMapping("/common/getPDFStream/{key}")
public void getPDFStream(@PathVariable String key,HttpServletRequest request,HttpServletResponse response) throws UnsupportedEncodingException {
FileStorage fileStorage = storageService.findByKey(key);
String type = fileStorage.getType();
MediaType mediaType = MediaType.parseMediaType(type);
Resource file = storageService.loadAsResource(key);
if (file == null) {
response.setStatus(-1);
}
try {
//文件所在的路径file.getURI().getPath()
File file1 = new File(file.getURI().getPath());
byte[] data = null;
FileInputStream input = new FileInputStream(file1);
data = new byte[input.available()];
input.read(data);
response.getOutputStream().write(data);
input.close();
} catch (Exception e) {
e.printStackTrace();
}
}
2、前台接收
封装axios, request.js
import axios from 'axios'
/**
* 封装axios异步请求的方法==================
*/
// 创建一个axios对象-----------
const request = axios.create({
baseURL:process.env.VUE_APP_BASE_API,//根据不同的环境，加载不同的常量值
timeout: 50000,//请求超时，50000毫秒
})
// 设置请求拦截器====================================
// 对拦截进行请求--------------------
request.interceptors.request.use(config = {
//请求拦截
config.data = {
...config.data,
userId: sessionStorage.getItem('userId')
}
return config;
}, error = {
//出现异常
return Promise.reject(error);//es6写法
});
// 设置响应拦截器==================================
// 对拦截进行响应--------------------
request.interceptors.response.use(response ={
if(!response.data||response.data==""){
return '{"flag":"failure","msg":"未知错误"}';
}
return response.data;
},error ={
return Promise.reject(error);
})
export default request //导出自定义创建的axios对象,供其他组件进行使用
3、定义方法 common.js
import request from '@/utils/request' //导入已经封装好的axios请求方式
export function getPDFStream(param) {
// 定义后端请求路径
let url = process.env.VUE_APP_BASE_API + '/common/getPDFStream/' + fileKey
return request.get(url, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob'
}).then(async (data) = {
console.log('getPDFStream data', data)
const isLogin = await blobValidate(data.data)
console.log('download isLogin', isLogin)
if (isLogin) {
const blob = new Blob([data.data], {type: 'application/pdf'})
return blob
} else {
const resText = await data.text()
const rspObj = JSON.parse(resText)
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg)
}
}).catch((r) = {
console.error(r)
Message.error('下载文件出现错误，请联系管理员！')
})
}
4、vue页面代码
①触发事件列表标签
{{scope.row.courseName}}
②预览展示弹窗
el-dialog p="" /el-dialog
width="900px"
title="预览"
:visible.sync="lookPdfFile"
:footer="null"
:forceRender="true"
@ok="lookPdfFile"
③ 需要导入方法、初始值、和自定义方法
// 在vue页面导入方法getPDFStream
import { getPDFStream } from "@/api/common";
// 在vue页面定义data
data () {
return {
lookPdfFile:false,//预览pdf
pdfUrl:'',// pdf路径
}
}
// 在vue页面methods定义方法handlePDF
methods: {
/** 课程预览 **/
async handlePDF(row) {
console.log('handleLook', row)
this.getPDFStream(row.fileKey).then(res = {
console.log('res::::', res)
// debugger
if (window.createObjectURL !== undefined) { // basic
this.pdfUrl = window.createObjectURL(res) + '#toolbar=0'
} else if (window.webkitURL !== undefined) { // webkit or chrome
try {
this.pdfUrl = window.webkitURL.createObjectURL(res) + '#toolbar=0'
} catch (error) {
}
} else if (window.URL !== undefined) { // mozilla(firefox)
try {
this.pdfUrl = window.URL.createObjectURL(res) + '#toolbar=0'
} catch (error) {
}
}
this.$nextTick(() = {
console.log('this.pdfUrl', this.pdfUrl)
this.lookPdfFile = true
})
})
}
}
java 数据库中2进制流image转成PDF
FileUtils.writeByteArrayToFile(new File("xx.pdf"),p.getBytes());
一般存到数据库的二进制流都是经过加密的，常用的是base64
byte[]bytes = new BASE64Decoder().decodeBuffer(p);
FileUtils.writeByteArrayToFile(new File("xx.pdf"),bytes);
js实现各种文件下载，文件类型包括word、excel、exe、pdf、txt、jpg等等
http jq ajax请求后台 返回一个文件 直接就可以下载了 下载地址为浏览器设置的默认下载地址
使用js下载保存pdf文件
pdf.js
是基于开放的
html5
及
javascript
技术实现的开源产品。简单说就是一个
解析器。运用html5javascript（即pdf.js仅使用安全的web语言，不包含任何攻击者可以用的本地代码块）的pdf阅读器pdf.js，直接在标准的html页面上载入和渲染pdf...
