Cómo obtener una vista previa de la secuencia de archivos pdf en el front-end

1. Selección de componentes PDF

Al buscar información, puede encontrar las siguientes soluciones, la más madura de las cuales es vue-pdf

1. El iframe se puede usar no solo para buscar documentos estáticos locales, sino también para obtener una vista previa de los documentos de flujo de archivos devueltos por el backend

2. vue-pdf es una solución de vue preview pdf relativamente completa

3. Un componente pdf empaquetado por otros que se encuentran en la red vueshowpdf

	ventaja	defecto	principio
iframe/objeto/incrustar	Fácil de usar, incluidas funciones integradas como cambio de página, impresión y zoom	No puedo deshabilitar la impresión	Incruste pdf como complemento en estas tres etiquetas HTML
vueshowpdf	El estilo es simple y refrescante, incluidas las funciones de cambio de página y zoom, y se puede prohibir la impresión	Los estilos relevantes no se pueden personalizar sin modificar el código fuente, no hay un indicador de progreso de carga y aparecerá una pantalla blanca antes de que se complete la carga	Basado en la implementación subyacente de pdf.js
vue-pdf	Los componentes de estilo se pueden personalizar, incluido el progreso de carga, el cambio de página, los elementos interactivos en la página, etc.	Para corregir la proporción de ancho y alto, el contenedor principal que envuelve el pdf debe ajustarse lo más grande posible para mostrarlo completamente	Implementación basada en pdf.js

En resumen,

• Si simplemente desea  incrustar PDF en la página , usar iframe/object/embed es la mejor opción, no requiere que usted mismo escriba los componentes de cambio de página, y no necesita ajustar el estilo, y la experiencia del usuario es buena.
• Si  no hay necesidad de personalizar el estilo   , también es muy bueno usar  vueshowpdf  , y la interfaz de usuario emergente se verá más alta.
• Si hay  una gran demanda de control de permisos y personalización de estilo , usar  vue-pdf  es la mejor opción, con interfaces y atributos completos, gran escalabilidad y alto grado de libertad.

2. Pasos de uso de iframe

2.1 Uso y lógica

Lógica: establezca el flujo de archivo incomprensible devuelto por el backend en responseType="arraybuffer" , luego lea el blob devuelto y luego use createObjectURL para leer la URL

 2.2 Ejemplo de código

<template>
    <iframe :src="src" frameborder="0" :style="iframeStyle" />
</template>

<script>

import { mapState } from 'vuex'
import { getNodeObjectData } from '@/modules/viewer/apis/service'

export default {
    name: 'pdfPanel',
    props: {
        node: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            src: ''
        }
    },
    computed: {
        ...mapState({
            innerHeight: (state) => state.viewerStore.setting['innerHeight']
        }),
        iframeStyle() {
            return {
                width: '100%',
                height: `${this.innerHeight - 130}px`
            }
        }
    },
    mounted() {
        return getNodeObjectData({
            meta_id: this.node.id
        })
        .then((res) => {
            const blob = new Blob([res], { type: 'application/pdf' })
            const url = window.URL.createObjectURL(blob)
            this.src = url
        })
    },
    methods: {
        handleFullScreen() {
            window.open(`${this.src}#filename=${this.node.name}`, "_blank")
        }
    }
}
</script>>

2.3 Explicación detallada con imágenes y textos

 

1. El backend devuelve un flujo de archivos, de la siguiente manera:

2. Configuración de solicitud de interfaz responseType="arraybuffer"

export function getNodeObjectData(params) {
    return axios({
        url: `${apiPrefix}/pdf`,
        method: 'GET',
        params: params,
        responseType: 'arraybuffer'
    })
}