前端预览pdf文件流详细步骤

<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>>

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