[Vue] vue2 uses vue-pdf to preview pdf files, preview multiple pages, online preview method 2, preview within the vue page, no additional pdfjs package required, nanny-level tutorial

Table of Contents of Series Articles

[Vue] vue2 preview displays quill rich text content, vue-quill-editor echoes the page, v-html echoes rich text content [Vue]
vue2 project uses swiper carousel chart August 21, 2023 Practical nanny-level tutorial
[Vue 】vue2 uses pdfjs to preview pdf files, online preview method 1, pdfjs file package opens a new window to preview pdf files

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

Preface

Reference article 1: Front-end implementation of pdf preview in vue (including usage of vue-pdf plug-in)
Reference article 2 : Using vue-pdf in vue to implement pdf paging preview and scaling (can solve the problem of unclear pdf preview)

You can read the reference article first, and then look at mine. This author is concise and rough, and you can use it immediately. What I wrote is mainly for newbies,
but I only previewed it. If you need to switch to the previous page or the next page, please read the reference article. 2

提示：以下是本篇文章正文内容，下面案例可供参考

1. Download vue-pdf

Official website address portal

npm install vue-pdf -S

2. Usage steps

1. Create a page

I need a vue page to preview the file, and at the same time, the parameters are passed in through the url address.
Create a folder named under viewsviewPDF

Insert image description here

2. Configure routing

The code is as follows (example):

  {
    
    
    path: '/viewPDF',
    name: 'viewPDF',
    component: () => import('../views/viewPDF/index.vue'),
    meta: {
    
    
      title: "预览pdf文件"
    },
  }

The example path is as follows

http://192.168.0.6:9000/viewPDF?filePath=your file path

My file path is
/profile/upload/2023/09/12/Pharmaceutical Engineering Comprehensive Experiment Notes_20230912100721A002.pdf

Insert image description here
在路径上，不需要去拼接/dev-api
This splicing thing is done on this page.

3. Write pages (default multiple pages)

Since the code is simple,
just paste and replace it all without splitting it.

<template>
    <div>
        <pdf v-for="i in numPages" :key="i" :src="pdfUrl" :page="i">
        </pdf>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
      
      
    name: "vinit",
    components: {
      
      
        pdf
    },
    data() {
      
      
        return {
      
      
            pdfUrl: '',
            numPages: undefined,
        }
    },
    computed: {
      
      
        // 当前页面链接 http://192.168.0.6:9000/viewPDF?filePath=测试.pdf
        // return http://192.168.0.6:9000
        trimmedUrl() {
      
       
            // 完整的URL
            const fullUrl = window.location.href;

            // 使用URL对象来解析URL
            const urlObject = new URL(fullUrl);

            // 获取截取后的域名和端口号部分
            const trimmedUrl = `${ 
        urlObject.protocol}//${ 
        urlObject.host}`;

            return trimmedUrl;
        }
    },
    watch: {
      
      },
    filters: {
      
      },
    created() {
      
      
    },
    mounted() {
      
      
        this.getTotal()
    },
    methods: {
      
      
        // 获取pdf总页数
        getTotal() {
      
      
            // 多页pdf的src中不能直接使用后端获取的pdf地址 否则会按页数请求多次数据
            let loadingTask = this.trimmedUrl + process.env.VUE_APP_BASE_API + this.$route.query.filePath
            // 需要使用下述方法的返回值作为url
            this.pdfUrl = pdf.createLoadingTask(loadingTask)
            // 获取页码
            this.pdfUrl.promise.then(pdf => {
      
      
                this.numPages = pdf.numPages;
            }).catch(error => {
      
      

            })
        }
    },
}
</script>

4. Single page pdf preview

Basic usage
Insert image description here

Summarize

More ways to view the official website portal