Vue implements online preview of PDF files (using pdf.js/iframe/embed)

Preface

I am currently working on a high-quality course that requires online preview of the courseware PPT. Our idea is to convert the PPT into PDF for online preview, so the question is how to achieve online preview of PDF.

During the implementation process, in order to better display the effect, I used a variety of different methods and finally chose pdf.js which had the best effect.

Implementation method:

1: iframe

Embed PDF into web page with iframe to achieve preview effect. The idea is good and the implementation is simple, but the display is cruel...

Although one line of code is concise and clear, and the effect is OK when opening Google Chrome, the shortcomings are also very obvious! ! ! !

<iframe src="http......" width="100%"></iframe>

shortcoming:

(1) Incompatible with IE, because iframe is not standardized and IE no longer uses it

(2) Download pop-up window! ! ! Every time you open the preview, a download pop-up window pops up, which is a very bad user experience

2: embed

Embed and iframe feel similar things. They are equally simple and clear to use, and the effect is also good when opening IE, but the interference of download pop-up windows cannot be avoided.

 <embed src="http......" width="100%" height="400" />

3: pdf.js (the effect is the best)

Implementation steps:

(1) Download the pdf.js file

Because there are many pdf.js files, we only need to use the core files, so extract the core files (cross-domain errors have been handled). Click to download the core file

(2) Import core files into static

(3) Use

<template>
	<iframe :src="pathUrl" width="100%"></iframe>
</template>

<script>
export default {
	data () {
	   return {
	     pathUrl:''
	   }
	 },
	 mounted () {
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + encodeURIComponent('https://lidn02.o%BA.pdf') // Find the viewe.html in the pdf file introduced before and + pdf address},
 }
</script>

(4) The effect is compatible with all major browsers.

(5) Receive PDF as a stream

Although the above effect has been achieved, there is still an error line when opening the console:

In order to solve this problem, or when encountering cross-domain, the PDF file is received in the form of a stream and then displayed:

mounted(){
	this.getData(your pdf address)
}

//Receive file stream, convert address and then display getData(url){
  axios.get(url,{
    responseType:'blob',
  })
    .then(res => {
      let blob = new Blob([res.data], {type: "application/vnd.ms-excel"})
      let objectUrl = URL.createObjectURL(blob)
      this.pathUrl = '../../../../../static/pdf/web/viewer.html?file=' + objectUrl
    })
    .catch(err => {
      console.log(err)
    })
}

Summarize

This is the end of this article about Vue's online preview of PDF files. For more relevant Vue online preview of PDF files, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!