vue中使用 vue-pdf 實現PDF文件預覽

<style lang="scss">
.PDFViewer{
    background-color: #3a3a3a;
    font-size: 16px;
    height: 100%;
    overflow: scroll;
    a {
        text-decoration: none;
    }
    .PDFViewerHeader{
        background-color:white;
        color: #3a3a3a;
        height: 60px;
        line-height: 60px;
        h1 {
            margin: 0;
            padding-left: 20px;
            font-size: 16px;
            height: 60px;
            line-height: 60px;
        }
        span {
            width: 100%;
            display: inline-block;
            text-align: center;
        }
    }
    .DownloadBtn{
        float: right;
    }
    .PDFViewerBody{
        padding: 40px;
    }
    .card {
        margin-bottom: 10px;
    }
}
</style>
<template>
    <div class="PDFViewer" v-loading.fullscreen.lock="fullscreenLoading">
        <header class="PDFViewerHeader">
            <el-row>
                <el-col :span="8">
                    <h1>{{name}}</h1>
                </el-col>
                <el-col :span="8">
                    <span>{{numPages}}頁</span>
                </el-col>
                <el-col :span="8">
                    <el-menu background-color="#fff" text-color="#3a3a3a" height="100%">
                        <el-menu-item index="1" class="DownloadBtn">
                            <a :href="this.url" download="">下載</a>
                        </el-menu-item>
                    </el-menu>
                </el-col>
            </el-row>
        </header>
        <div class="PDFViewerBody">
            <el-card class="card" v-for="i in numPages" :key="i" shadow="always">
                <pdf
                    :src="src"
                    :page="i"
                    :key="i"
                    style="display: inline-block; width: 100%; height: 100%;"
                ></pdf>
            </el-card>
        </div>
        <el-backtop target=".PDFViewer" :right="80">
            <div style="
            {
                height: 100%;
                width: 100%;
                background-color: #3a3a3a;
                border-radius: 20px;
                box-shadow: 0 0 6px rgba(0,0,0, 1);
                text-align: center;
                line-height: 40px;
                color: #ffffff;
            }">
                <em class="el-icon-caret-top"></em>
            </div>
        </el-backtop>
    </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    components:{
        pdf
    },
    data() {
        return{
            fullscreenLoading: true,
            name:'',
            url: '',
            src: undefined,
            currentPage: 0,
            numPages: 0
        }
    },
    created() {
        this.name = 'STJ0704195A_M091101.pdf_3.pdf';
        //this.url = this.$route.query.url;
        this.url = 'STJ0704195A_M091101.pdf_3.pdf';
        this.src = pdf.createLoadingTask(this.url);
    },
    mounted() {
        this.src.promise.then(pdf => {
            this.numPages = pdf.numPages;
            this.fullscreenLoading = false;
        }).catch(err => {
            console.log(err)
            this.$message.error(`${err.message}: 加載PDF文件失敗`);
        })
    },
    methods: {

    }
}
</script>

 

使用vue-pdf會出現跨域問題，所以在開發的時候先可以使用本地文件。將PDF放到在vue項目工程目錄下的public文件中，使用‘localhost:8080/’+PDF文件名即可訪問。

關於跨域問題，如果后端同學不能幫忙解決，你可以使用跨域代理轉發來解決，我在另一篇隨筆有提到大概方法。鏈接

 

效果如下：

 

我們還可以使用瀏覽器自帶的功能來實現預覽。

<a href="http://xxxx.pdf" target="_blank"><span>預覽</span></a>