Red de conocimiento informático - Problemas con los teléfonos móviles - Vue recibe secuencias de archivos binarios en el front-end para implementar la vista previa de PDF

Vue recibe secuencias de archivos binarios en el front-end para implementar la vista previa de PDF

1. Código del controlador en segundo plano

@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

})

})

}

}

}

}