Vue pdf 多文件全部頁面顯示 使用筆記

pdf 多文件顯示全部顯示

參考鏈接

https://github.com/FranckFreiburger/vue-pdf#createloadingtasksrc

單個文件

安裝

npm install --save vue-pdf

單個pdf文件顯示全部，我是直接復制的參考鏈接

<template>
	<div>
		<pdf
			v-for="i in numPages"
			:key="i"
			:src="src"
			:page="i"
			style="display: inline-block; width: 25%"
		></pdf>
	</div>
</template>

<script>

import pdf from 'vue-pdf'

var loadingTask = pdf.createLoadingTask('https://cdn.mozilla.net/pdfjs/tracemonkey.pdf');

export default {
	components: {
		pdf
	},
	data() {
		return {
			src: loadingTask,
			numPages: undefined,
		}
	},
	mounted() {

		this.src.promise.then(pdf => {

			this.numPages = pdf.numPages;
		});
	}
}

</script>

多個pdf文件 全部顯示

效果預覽

有幾個點要注意

• 一 本地pdf文件的話，pdf文件必須放置在 public （vue-cli 4+） 或者 static （vue-cli < 3） 文件夾下, 如果放置src/assets下， 會讀取報錯，下面demo pdf文件放置在public下
  

• 二 使用線上的pdf文件時，需要后台配合處理跨域，否則讀取不了pdf文件。

• 三 得使用async/await語法糖取出promise對象里面的pdf總頁數。

<template>
    <div class="about">
        <template v-for="item in handelPdfList">
            <pdf
                    v-for="i in item.numPages"
                    :key="i"
                    :src="item.src"
                    :page="i"
                    style="display: inline-block; width: 25%"
            ></pdf>
        </template>
    </div>
</template>
<script>
    import pdf from 'vue-pdf'


    export default {
        name: "about",
        components: {
            pdf
        },
        data() {
            return {
                // src: loadingTask,
                numPages: undefined,
                pdfList: [
                    {
                        src: '/test.pdf'
                    },
                    {
                        src: '/test.pdf'
                    }
                ],
                handelPdfList: []
            }
        },
        mounted() {
            this.handelPdf()
        },
        methods: {
            async handelPdf() {
                for (let info of this.pdfList) {
                    // 測試使用本地的pdf文件 (必須放到public(vue-cli 4+)或者static文件里面)
                    // info.src = '/test.pdf'
                    // 測試使用 自己搭建 已跨域的pdf文件
                    // info.src = 'http://127.0.0.1:8010/assets/test.pdf'
                    info['numPages'] = await pdf.createLoadingTask(info.src).promise.then(pdf => {
                        return pdf.numPages
                    })
                }
                // 數據處理完畢后  再復制
                this.handelPdfList = this.pdfList
            }
        }
    }
</script>