Vue-pdf implements online preview of PDF files

Preface

In most projects, you will encounter online preview of PDF files. The project uses element ui and is implemented using vue-pdf.

Install Dependencies

npm install --save vue-pdf

Related parameters

Parameter introduction:

url: The path of the pdf file, which can be a local path or an online path.
page: the number of the currently displayed page, for example, the first page page=1
rotate: Rotation angle, for example, 0 means no rotation, +90 and -90 means horizontal rotation.
progress: The loading progress of the current page, ranging from 0-1. When it is equal to 1, it means that the current page has been completely loaded.
page-loaded: callback function for successful page loading, rarely used.
num-pages : total number of pages
error: callback for loading errors
link-clicked: Links within a standalone PDF will be triggered.
print This is the print function. Note: Google Chrome will display garbled characters, which is related to the font.

accomplish

<template>
    <div>
        <el-row>
            <el-button @click="onPreview" size="small">Preview</el-button>
        </el-row>
        <el-dialog title="Preview Contract Attachment" :visible.sync="viewVisible" center width="60%" @close='closePreview'>
            <el-row :gutter="20">
                <span>Total {{pageCount}} pages, current page {{pdfPage}}</span>
                <el-button type="text" size="mini" @click.stop="previousPage">Previous page</el-button>
                <el-button type="text" size="mini" @click.stop="nextPage">Next page</el-button>
            </el-row>
            <div>
                <pdf :src="src" :page="pdfPage" @num-pages="pageCount = $event" @page-loaded="pdfPage = $event" style="display: inline-block; width: 100%"></pdf>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
import store from '@/store/'
export default {
    components:{
        pdf
    },
    data(){
        return {
            viewVisible: false,
            src: null,
            pdfPage : 1,
            pageCount: 0,
            token: store.getters.access_token,
        }
    },
    methods:{
        onPreview(){
            this.src = pdf.createLoadingTask({
                url: 'http://localhost:8082/file/demo.pdf',
                httpHeaders: {Authorization:'Bearer '+ this.token}
            });
            this.src.promise.then(pdf => {
                this.viewVisible = true;
            });
        },
        closePreview(){
            this.pdfPage = 1;
        },
        previousPage(){
            let p = this.pdfPage
            p = p > 1 ? p-1 : this.pageCount
            this.pdfPage = p
        },
        nextPage(){
            let p = this.pdfPage
            p = p < this.pageCount ? p+1 : 1
            this.pdfPage = p
        }
    }
}
</script>

Effect

Note

1. URL

url is the file address path

this.src = pdf.createLoadingTask({
    url: 'http://localhost:8082/file/demo.pdf',
});

2. Set the request header

You can set parameters such as token through httpHeaders

httpHeaders: {Authorization:'Bearer '+ this.token}

3. src

This is more important. Many posts on the Internet are like this.

this.src.then(pdf => {
    this.viewVisible = true;
})

Will report TypeError: this.src.then is not a function

TypeError: this.src.then is not a function
    at VueComponent.onPreview (index.vue?6ced:241)
    at click (index.vue?aaff:261)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
    at VueComponent.handleClick (element-ui.common.js?5c96:9413)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

The correct answer is this

this.src.promise.then(pdf => {
    this.viewVisible = true;
});

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue implements online preview of PDF files and downloading (pdf.js)
Vue implements online preview function of PDF document
Vue plugin development: How to use pdf.js to realize online preview of PDF documents on mobile phones
Vue sample code for online preview of office files
Vue implements online preview of PDF files (using pdf.js/iframe/embed)
vue Sample code for using vue-pdf to implement PDF online preview
vue-pdf realizes online file preview
Online preview of three common file types in Vue projects (pdf/word/excel tables)

<<: How to read the regional information of IP using Nginx and GeoIP module

>>: MySQL Community Server 5.6 installation and configuration tutorial under Windows 8