Vue recibe secuencias de archivos binarios en el front-end para implementar la vista previa de PDF
@GetMapping("/common/getPDFStream/{key}")
public void getPDFStream(@PathVariable String key, solicitud HttpServletRequest, respuesta HttpServletResponse) arroja una excepción UnsupportedEncodingException {
FileStorage fileStorage = StorageService.findByKey(clave);
Tipo de cadena = fileStorage.getType();
MediaType mediaType = MediaType.parseMediaType(tipo) ;
Archivo de recursos = StorageService.loadAsResource(clave);
if (archivo == null) {
respuesta.setStatus(-1);
p>}
intente {
//La ruta del archivo file.getURI().getPath()
Archivo file1 = nuevo archivo ( file.getURI().getPath());
byte[] datos = nulo;
entrada FileInputStream = nuevo FileInputStream(archivo1);
datos = nuevo byte[input.write(datos);
input.close();
} catch (Excepción e) {
e.printStackTrace()
}
}
2. Recepción front-end
Encapsular axios, request.js
importar axios desde 'axios'
/**
* Encapsular el método de solicitud asincrónica de axios ===================
*/
// Crear un objeto axios-----------
const request = axios.create({
baseURL:process.env.VUE_APP_BASE_API,//Carga diferentes valores constantes según el entorno
tiempo de espera: 50000,//Solicitud de tiempo de espera, 50000 milisegundos
})
// Establecer interceptor de solicitudes ==================================== =
// Solicitud de interceptación--------------------
request.interceptors request.use(config => {
// Solicitud de interceptación
config.data = {
.config.data,
userId: sessionStorage.getItem(. 'userId')
}
devolver configuración;
}, error
=> {
//Excepción
return Promise.reject(error);//es6 write
});
/ / Establecer el interceptor de respuesta ===================================
// Responder a la intercepción ------------------- -
request.interceptors.response.use(response =>{
if( !response.data||response.data==""){
return '{"flag":" fallo", "msg":"Error desconocido"}';
}
devuelve respuesta.data;
},error =>{
devuelve Promise.reject(error);
} )
exportar solicitud predeterminada // Exportar un objeto axios creado personalizado para que lo utilicen otros componentes
3 Definir métodos common.js
solicitud de importación desde '@. /utils/request' //Importar un método de solicitud axios ya encapsulado
Exportar función //Exportar un objeto axios creado personalizado para uso de otros componentes
3./p>
función de exportación getPDFStream(param) {
// Definir la ruta de solicitud de backend
let url = process.env.VUE_APP_BASE_API + '/common/getPDFStream/' + fileKey
return request.get(url, {
encabezados: { 'Tipo de contenido': 'aplicación/x-www-form-urlencoded' },
tipo de respuesta: 'blob '
}).then(async (datos) => {
console.log('getPDFStream data', datos)
const isLogin = await blobValidate(data.data)
console.log('descargar 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 = código de error[ rspObj.code] || rspObj.msg || código de error['default']
Mensaje.error(errMsg)
}
} ).catch((r) => {
console.error(r)
Message.error('Hubo un error al descargar el archivo, ¡comuníquese con el administrador!)
})
}
4. Código de página Vue
① Marca de lista de eventos de activación
{{scope .row.courseName}}
② Ventana emergente de visualización de vista previa
ancho =" 900px"
title="Vista previa"
:visible.sync="lookPdfFile"
:footer="null"
: forceRender="true"
@ok="lookPdfFile">
③ Necesidad de importar métodos, valores iniciales y métodos personalizados
// En la página vue Importe el método getPDFStream
import { getPDFStream } from "@/api/common";
// Defina datos en la página vue
datos () {
return {
lookPdfFile：false,// vista previa del pdf
pdfUrl:'',// ruta del pdf
}
}
// Defina el método getPDFStream en el método de la página vue.
método de definición del método de página vue handlePDF
Método: {
/** Vista previa del curso***/
async handlePDF(row) {
console.log('handleLook', fila)
this.getPDFStream(row.createObjectURL(res) + '#toolbar=0'
} else if (window.webkitURL ! == indefinido) { // webkit o chrome
prueba {
this.pdfUrl = window.webkitURL.createObjectURL(res) + '#toolbar=0'
} catch (error) {
}
} else if (window.URL ! == indefinido) { // mozilla(firefox)
prueba {
this.pdfUrl = window.URL.createObjectURL(res) + '#toolbar=0'
} catch (error) {
}
}
this.$nextTick(() => {
console.log('this.pdfUrl', this.pdfUrl)
this.lookPdfFile = true
})
})
}
}
}
}