Preface
In Vue, we often need to handle file uploads and downloads, but sometimes we need to provide users with convenient file preview and printing functions. This article will introduce how to use Vue to implement file preview and printing functions.
File preview
Implementing file preview function in Vue, we can use some third-party libraries to help us do it. Here we will use, a JavaScript-based image browser plug-in, supports preview of various file formats such as pictures, videos and PDFs.
Install
First, we need to install using npm or yarn:
npm install viewerjs --save
or
yarn add viewerjs
Introduced
In Vue components, we can introduce them in the following ways:
<template>
<div>
<img :src="imageUrl" @click="showViewer">
</div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/';
export default {
data() {
return {
imageUrl: '/',
viewer: null
}
},
methods: {
showViewer() {
if (!) {
= new Viewer(this.$('img'), {
url: 'data-original'
});
} else {
();
}
}
}
}
</script>In the above code, we first passimportIntroduce and introduce its CSS file. Then we use aimgTags display the image and call it when clicking on the imageshowViewermethod. existshowViewerIn the method, we usenew ViewerCreate a Viewer instance and pass in the image elements to preview and some configuration options. If the Viewer instance already exists, callshowMethod displays the preview window.
Preview PDF file
In addition to picture files, preview PDF files is also supported. We can use a Vue componentiframeTags to display PDF files and inmountedInitialize the Viewer instance in the hook function.
<template>
<div>
<iframe :src="pdfUrl" width="100%" height="500px"></iframe>
</div>
</template>
<script>
import Viewer from 'viewerjs';
import 'viewerjs/dist/';
export default {
data() {
return {
pdfUrl: '/',
viewer: null
}
},
mounted() {
= new Viewer(this.$('iframe'), {
url: 'src'
});
}
}
</script>In the above code, we use aiframeTags display PDF files and sets their width and height. existmountedIn the hook function, we passnew ViewerCreate a Viewer instance and pass in the one you want to previewiframeElements and configuration options.
File printing
In addition to file preview, we can also implement file printing function in Vue. In Vue, we can use()Method to print the current page.
Print HTML content
If we need to print the HTML content of a Vue component, we can use the following code:
<template>
<div ref="printContent">
<h1>{{title}}</h1>
<p>{{content}}</p>
</div>
<button @click="print">Print</button>
</template>
<script>
export default {
data() {
return {
title: 'Vue Print Example',
content: 'This is the content of a Vue component that can be output when printed. '
}
},
methods: {
print() {
const printContent = this.$;
const printWindow = ('', '', 'width=800,height=600');
(`<html><head><title>${}</title></head><body>${printContent}</body></html>`);
();
();
();
();
}
}
}
</script>In the above code, we first define a Vue component withrefAttributesdivElement, used to get the HTML content of the component. Then inprintIn the method, we useMethod creates a new window and writes the component's HTML content to that window. Next, we callprintMethod prints the current window and closes the window.
Print PDF file
In addition to printing HTML content, we can also print PDF files. In Vue, we can use third-party librariesTo load and print PDF files.
First, we need to install using npm or yarn:
npm install pdfjs-dist --save
or
yarn add pdfjs-dist
Next, in the Vue component, we can load and print the PDF file using the following code:
<template>
<div>
<button @click="loadPdf">loadPDF</button>
<button @click="printPdf">PrintPDF</button>
</div>
</template>
<script>
import pdfjsLib from 'pdfjs-dist';
export default {
data() {
return {
pdfUrl: '/',
pdfDoc: null
}
},
methods: {
async loadPdf() {
const loadingTask = ();
= await ;
},
async printPdf() {
if () {
const printWindow = ('', '', 'width=800,height=600');
const pdfUrl = (await ());
(`<html><head><title>PrintPDFdocument</title></head><body><embed src="${pdfUrl}" type="application/pdf" /></body></html>`);
();
();
();
();
}
}
}
}
</script>In the above code, we first passimportIntroduce the library. Then in the Vue component, we define a PDF file URL and a PDF document object. existloadPdfIn the method, we useMethod loads the PDF file and saves the obtained PDF document object topdfDocin the attribute. existprintPdfIn the method, we first determine whether the PDF document object has been loaded, and then useMethod creates a new window and writes the URL of the PDF file to the window. Next, we callprintMethod prints the current window and closes the window.
Conclusion
Through the introduction of this article, we can see that using Vue to implement file preview and printing functions is not difficult. We can use some third-party libraries to help us complete these functions, and we can also customize and optimize according to specific needs.
This is the article about how to use Vue for file preview and printing. For more related Vue file preview and printing content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!