Summary of various methods of embedding PDF on vue3 mobile terminal

1. Use embed embed

Benefits: Simple, small code, complete functions
Disadvantages: There are fixed styles, difficult to modify, and cannot be customized

<embed class="embedPdf" 
:src="pdfurl" 
type="application/pdf">

2. Customize embed pdf using vue-pdf-embed (pdf preview)

Advantages: Except for the content of pdf, you can modify everything and customize the style.
Disadvantages: You have to handwritten yourself to download, next page, previous page and other functions
Use the vue-pdf-embed plug-in to display preview pdf (you can only display one page here, or you can display all without pagination, and it will be a long strip, so we make the pagination ourselves.

&lt;div class="vuePdfEmbed"&gt;
        &lt;VuePdfEmbed
          :source=""
          :style="scaleFun"
          class="vue-pdf-embed"
          :page=""
          width="700"
        /&gt;
        &lt;div class="page-tool"&gt;
          &lt;div class="page-tool-item" @click="lastPage"&gt;Previous page&lt;/div&gt;
          &lt;div class="page-tool-item"&gt;{{  }}/{{  }}&lt;/div&gt;
          &lt;div class="page-tool-item" @click="nextPage"&gt;Next page&lt;/div&gt;
          &lt;div class="page-tool-item" @click="downloadPDF"&gt;download&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

The logic of paging is to use the createLoadingTask function in vue3-pdfjs to get the total number of pages of pdf. This function is an asynchronous function, which will return the information of pdf (other information is basically useless, only numPages is more useful.)

import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // Get the total number of pages
const pdfurl = ref("...pdf address")
const state = reactive({
  source: pdfurl, //Preview the pdf file address  pageNum: 1, //Current page  scale: 1, // Scaling  numPages: 0, // Total page count});
const scaleFun = reactive({
  transform:'scale('++')'
})

// Get the previous pagefunction lastPage(){
  if(&gt;1){
    --
  }
}

// Get the next pagefunction nextPage(){
  if(&lt;){
    ++
  }
}

// Download pdffunction downloadPDF(){
	fetch(encodeURI()).then(res =&gt; {
        ().then(myBlob =&gt; {
          const href = (myBlob);
          const a = ('a');
           = href;
           = 'report'; // Download file rename          ();
          ();
        });
      });
}

onMounted(() =&gt; {
  // Load asynchronous tasks  const loadingTask = createLoadingTask();
  // Get the page count after loading PDF  ((pdf) =&gt; {
     = ;
  });

import { reactive, onMounted } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs"; // Get the total number of pagesconst pdfurl = ref("...pdf address")
const state = reactive({
  source: pdfurl, //Preview the pdf file address  pageNum: 1, //Current page  scale: 1, // Scaling  numPages: 0, // Total page count});
const scaleFun = reactive({
  transform:'scale('++')'
})
// Get the previous pagefunction lastPage(){
  if(&gt;1){
    --
  }
}
// Get the next pagefunction nextPage(){
  if(&lt;){
    ++
  }
}
// Download pdffunction downloadPDF(){
	fetch(encodeURI()).then(res =&gt; {
        ().then(myBlob =&gt; {
          const href = (myBlob);
          const a = ('a');
           = href;
           = 'report'; // Download file rename          ();
          ();
        });
      });
}
onMounted(() =&gt; {
  // Load asynchronous tasks  const loadingTask = createLoadingTask();
  // Get the page count after loading PDF  ((pdf) =&gt; {
     = ;
  });

.vuePdfEmbed{
  flex: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.vuePdfEmbed{
  .page-tool {
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    width: 320px;
    align-items: center;
    margin: auto;
    justify-content: space-around;
  }
  .page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
  }
}

This is the end of this article about two ways to embed pdf on vue3 mobile. For more related content on vue3 mobile embed pdf on vue3 mobile, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!