1. Run the Vue command and install the corresponding plug-in. (Run under the specified Vue file)
npm install downloadjs
2. Secondly, introduce and install the corresponding plug-ins in the project (the import function cannot be used without introducing it)
import download from "downloadjs";
3. Specific code description of the download method. (Download PDF code and custom name to export PDF)
function down() {
var fileName = "Custom file naming"
var url = ; //File source (URL or local file path) // If you request it, you can add it to loading fetch(url).then(res => {
return ()
}).then(blob => {
// This is an external reference file, this file download(blob, fileName)
// Download ends, loading ends }).catch(err => {
(err)
return false
}).finally(res => {
// You can also end loading here. Whether it is successful or failed, it will end loading return true
})
}Summary (Directly copy the entire system and modify it slightly according to the direct code environment and framework):
<template>
<button @click="down">Current document export</button>
</template>
<script setup lang="ts">
import download from "downloadjs";
// Download PDF areafunction down() {
var fileName = "Custom file naming"
var url = ; //File source (URL or local file path)
// If you request it, you can add it to loading fetch(url).then(res => {
return ()
}).then(blob => {
// This is an external reference file, this file download(blob, fileName)
// Download ends, loading ends }).catch(err => {
(err)
return false
}).finally(res => {
// You can also end loading here. Whether it is successful or failed, it will end loading return true
})
}
</script>Get article traffic recommendation exposure and talk nonsense
What does vue3.0 bring to
1. Performance improvementPackage size is reduced by 41% and initial rendering is faster by 55%, and updated render blocks are reduced by 133% and memory is reduced by 54%...
2. Source code upgradeUsing Proxy instead of defineProperty to implement responsive rewriting of virtual DOM implementation and Tree-Sharking...
3. Embrace TypeScriptvue3.0 better supports TypeScript
4. New features
Composition API (combination API)
. setup configuration
. ref and reactive
. watch and watchEffect
. Provide and inject
。 .......
New built-in components
。 Fragment
。Teleport
。Suspense
Other changes
. New life cycle hook
. The data option should always be declared as a function
. Remove keyCode support as a modifier for v-on
This is the end of this article about downloading PDF of Vue custom name. For more related content on Vue custom name, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!