前端預覽pdf文件流詳細步驟

更新時間：2023年09月28日 09:48:31 作者：valsedefleurs

公司最近有這么個需求,在線預覽pdf功能,正好有點時間,稍微整理記錄一下,這篇文章主要給大家介紹了關于前端預覽pdf文件流的相關資料,需要的朋友可以參考下

1. PDF組件選型

通過查找資料，可以找到如下幾種方案，其中最為成熟的方案是vue-pdf

1. iframe 既可以用來瀏覽本地static下的文檔，也可以預覽后端返回的文件流文檔

2. vue-pdf 較為完善的vue預覽pdf的方案

3. vueshowpdf 網絡上找到的一個他人封裝的pdf組件

	優(yōu)點	缺點	原理
iframe/object/embed	簡單易用，包含了翻頁，打印，縮放等內嵌功能	無法禁止打印	將pdf作為插件內嵌再這三個HTML標簽內
vueshowpdf	樣式簡單清爽，包含翻頁，縮放功能，可以禁止打印	在不修改源碼的情況下無法自定義相關樣式，無進度加載提示，加載完成前會出現(xiàn)白屏	基于底層pdf.js實現(xiàn)
vue-pdf	樣式組件可自定義，包含加載進度，翻頁，頁內元素可交互等	固定寬高的比例，需要將包裹pdf的父容器盡可能調大才能顯示完全	基于pdf.js實現(xiàn)

總結下來，

如果只想簡單在頁面嵌套PDF，使用iframe/object/embed是最好的選擇，它不需要你自己去編寫翻頁組件，不需要去調整樣式，用戶體驗佳。
如果對樣式沒有定制化的需求，使用 vueshowpdf 也是非常不錯，彈窗式的UI看起來會更加高大上。
如果對權限控制，樣式定制需求高，使用 vue-pdf 是最好的選擇，接口和屬性較全，擴展能力強，自由度高。

2. Iframe使用步驟

2.1 使用與邏輯

邏輯：將后端返回的看不懂的文件流，設置成reponseType="arraybuffer"，然后讀取到返回的blob，再使用createObjectURL讀取出url即可

2.2 代碼示例

<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 圖文詳解

1. 后端返回的是文件流，如下：

2. 接口請求設置responseType="arraybuffer"

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