@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
})
})
}
}