SoFunction
Updated on 2025-04-03

How to use vue to realize the function of viewing pdf files online

need:

There is a list page where the user clicks to view it. The bullet layer displays the pdf content returned by the background interface (not files, addresses, etc., garbled pdf inscriptions (binary file stream))

1. Installation

npm install --save vue-pdf

2. Text code

<template>
    <div>
		<el-table :data="dataList">
	        <el-table-column prop="fieldName" width="120" label="operate">
	          <template slot-scope="scope">
	            <span @click="look()">Check</span>
	          </template>
	        </el-table-column>
       </el-table>
	   <el-dialog title="Preview" :="dialogVisible" :before-close="closePdf">
      	 <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i" />
       </el-dialog>
	</div>
<template>
<script>
	import pdf from 'vue-pdf'
	export default {
	  components: {
	    pdf
	  },
	  data() {
   		 return {
  		 	  dialogVisible: false,
		      numPages: 1,
		      pdfSrc:"",
		      close:false,
   		 }
   	  },
   	  methods: {
		// View preview	    look(row) {
	      const that = this;
	       = "";
		  // Interface file address (path spelled out by the interface parameters)	      const url = `${Host}xxxxxx/xxxx/xxx?fileId=${}&fileName=${}.pdf`;
		  // If you call the interface (the responseType of the interface must be blob, the default json, otherwise the parsed pdf is blank) and the returned value (garbled pdf inscription (binary file stream)) needs to be transferred.		  // const url = (new Blob([res]), { // res returns a value for the interface			// type: "application/msword"
		  // });
	       = (url)
	      (pdf => {
	         = true;
	         = 
	        // Ensure that the pdf loads successfully, otherwise the bullet layer cannot be closed	        setTimeout(() => {
	           = true;
	        }, 2000);
	      })
	      .catch(error => {
	        that.$("Invalid PDF file!");
	      })
	    },
	    //This method solves the problem of the first view of the pdf text that does not load and complete subsequent viewing	    closePdf(done){
	      if() {
	         = 1;// Must be reset, if you view it multiple times, the head content will be missing.	         = false;
	        done();
	      } else {
	        this.$("PDF file loading");
	      }
	    }
	  }
	}
</script>

Problems encountered:

1. The head content will not be displayed after multiple views. Set numPages = 1;

2. The previous pdf view has not been loaded, and the next pdf view pdfSrc is still unable to load normally. Delaying to close the bullet layer (this method is a bit violent, I hope to find a good solution);

3. There will be a little extra content on the head, and there is nothing in the content, but it just feels like there is something similar to a border. The other contents on the head are set to cover the style (specific css omitted).

This function was implemented in subsequent projects, and the above problems were not encountered. The blind guess is because the pdf dialog has been added with v-if. The optical settings will only control the display and hide of the element and will not be re-rendered.

Summary: As long as it is a dialog, it is best to add v-if, which will avoid many problems.

expand:

If the backend returns in html format, do not use blob for the interface responseType called by the frontend, and directly place the return result in v-html. example:

<div v-html="responseData"/>

Summarize

This is the article about how to use vue to realize the function of viewing pdf files online. For more related vue to view pdf files online, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!