Requirements and Introduction

Recently, in a project where there was a need to preview images /PDF files, the Vue project simply adopted the Element-UI dialog component to display the files.

Image preview is as simple as placing an image in the Dialog component and adding the URL.

However, PDF previews are tricky to handle, and if you want to put PDFS in a dialog, you need to use vue-pdf (or pdf.js, which encapsulates the latter and works better in VUE).

The solution

Use VUE-PDF to display PDF

address

Install YARN Add VUE-pdf

example

<template> <! @num-pages: PDF page number 3. @pag-pages: PDF page number 4. @pag-pages: PDF page number --> // page: < PDF: SRC ="PDF path ":page="pdfPage" @num-pages="pdfPageCount = $event" @page-loaded="pdfPage = $event" ></ PDF ><! <button @click="nextPage"> </button> </template> <script> import pdf from 'vue-pdf' export default { components: { pdf }, data() { return { pdfPage: 1, pdfPageCount: 1,}}, methods: {// 前 页 previousPage() {let p = this.pdfpage; p = p > 1 ? p - 1 : this.pdfPageCount; this.pdfPage = p; }, // nextPage nextPage() {let p = this.pdfpage; p = p < this.pdfPageCount ? p + 1 : 1; this.pdfPage = p; } } } </script> <style></style>Copy the code

At this point, we are ready to embed a PDF into the page.

Existing problems

1. Read the progress bar

Because PDF can be too problematic, to improve the user experience, there is a progress bar when loading PDF. Since this project makes HTTP requests through AXIOS:

axios.create({
     url: 'aabbcc'.method: 'GET'.responseType: 'blob'.// When creating an instance of Axios
     // This is used to handle native Download events
     onDownloadProgress: progressEvent= > { handleDownloadProgress(progressEvent) }
})

// Handle progress bar issues
function handleDownloadProgress(e) {
    // E.loaded loaded
    / / e. otal all
    console.log(e.loaded / e.total)
}

Copy the code

You can customize the processing progress bar with onDownloadProgress

2. Chinese will not be displayed

If the following error message is displayed while reading the PDF:

Warning: Error during font loading: The CMap “baseUrl” parameter must be specified, ensure that the “cMapUrl” and “cMapPacked” API parameters are provided.

In the components that use VUE-PDF,

/ / 1. Introduction
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js';

// 2
this.pdfUrl = pdf.createLoadingTask({
    url,
    CMapReaderFactory
});
// If an error persists, use CDN to load cMap
this.pdfUrl = pdf.createLoadingTask({
    url,
    cMapUrl: 'https://cdn.jsdelivr.net/npm/[email protected]/cmaps/'.cMapPacked: true
});
Copy the code

3. Webpack appears after packaging[hash].worker.js

After packaging, worker.js appears in the root path and the PDF cannot be previewed

Solution:

Find node_modules/worker – loader/dist/index. Js

const filename = _loaderUtils2.default.interpolateName(this, options.name || '[hash].worker.js', {
Copy the code

Modified to 👇

const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', {
Copy the code

The packaged worker.js file will then exist in /static/js/