フロントエンドで PDF ファイル ストリームをプレビューする方法

1. PDFコンポーネントの選択

情報を検索すると、次のソリューションが見つかります。その中で最も成熟しているのは vue-pdf です。

1. iframe は、ローカルの静的ドキュメントを参照するだけでなく、バ​​ックエンドによって返されたファイル ストリーム ドキュメントをプレビューするためにも使用できます。

2. vue-pdf は比較的完全な vue プレビュー PDF ソリューションです

3. vueshowpdf ネットワーク上で見つかった、他の人によってパッケージ化された pdf コンポーネント

	アドバンテージ	欠点がある	原理
iframe/オブジェクト/埋め込み	ページめくり、印刷、ズームなどの組み込み機能を含め、使いやすい	印刷を無効にできません	これら 3 つの HTML タグに PDF をプラグインとして埋め込みます
vueshowpdf	ページめくりやズーム機能を備えたシンプルですっきりとしたスタイルで、印刷を禁止することもできます	関連するスタイルはソース コードを変更しないとカスタマイズできません。読み込みの進行状況を示すプロンプトは表示されず、読み込みが完了する前に白い画面が表示されます。	基礎となる pdf.js 実装に基づく
vue-pdf	読み込みの進行状況、ページめくり、ページ内のインタラクティブな要素などのスタイル コンポーネントをカスタマイズできます。	幅と高さの比率を修正するには、PDF をラップする親コンテナを可能な限り大きく調整して完全に表示する必要があります。	pdf.jsをベースにした実装

要約すると、

• PDF を単にページに埋め込みたいだけの場合は 、 iframe/object/embedを使用するのが最良の選択です。ページめくりコンポーネントを自分で作成する必要がなく、スタイルを調整する必要もなく、ユーザー エクスペリエンスは良好です。
• スタイルをカスタマイズする必要がない  場合は 、 vueshowpdf を 使用することも非常に効果的です 。ポップアップ UI がより縦長に表示されます。
• 権限の制御とスタイルのカスタマイズの要求が高い場合は 、完全なインターフェイスと属性、強力なスケーラビリティ、および高い自由度を備えたvue-pdf を使用すること が最良の選択です。

2. iframe の使用手順

2.1 使用法とロジック

ロジック: バックエンドによって返される理解できないファイル ストリームをresponseType="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'
    })
}