Vue自定義名稱下載PDF的方法
更新時(shí)間：2022年08月20日 14:58:33 作者：程序研
這篇文章主要介紹了Vue自定義名稱下載PDF,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.運(yùn)行Vue指令，安裝相對(duì)應(yīng)插件。（在指定的Vue文件下運(yùn)行）
npm install downloadjs
2.其次在項(xiàng)目中引入安裝相對(duì)應(yīng)的插件（不引入是無法使用導(dǎo)入功能的）
import download from "downloadjs";
3.下載方法的具體代碼描述。（下載PDF代碼和自定義名字命名進(jìn)行導(dǎo)出PDF的代碼）
function down() {
var fileName = "自定義文件命名哦"
var url = state.source; //文件來源（URL或者本地文件路徑state.source）
// 請(qǐng)求進(jìn)來，就可以加在loading
fetch(url).then(res => {
return res.blob()
}).then(blob => {
// 這是一個(gè)外部引用的download.js文件，這個(gè)文件
download(blob, fileName)
// 下載結(jié)束，loading結(jié)束
}).catch(err => {
console.log(err)
return false
}).finally(res => {
// 這里也可以結(jié)束loading。不管是成功失敗，都會(huì)結(jié)束loading
return true
})
}總結(jié)（直接復(fù)制整體根據(jù)直接代碼環(huán)境和框架微微修改一下即可完成）：
<template>
<button @click="down">當(dāng)前文檔導(dǎo)出</button>
</template>
<script setup lang="ts">
import download from "downloadjs";
// 下載PDF區(qū)域
function down() {
var fileName = "自定義文件命名哦"
var url = state.source; //文件來源（URL或者本地文件路徑）
// 請(qǐng)求進(jìn)來，就可以加在loading
fetch(url).then(res => {
return res.blob()
}).then(blob => {
// 這是一個(gè)外部引用的download.js文件，這個(gè)文件
download(blob, fileName)
// 下載結(jié)束，loading結(jié)束
}).catch(err => {
console.log(err)
return false
}).finally(res => {
// 這里也可以結(jié)束loading。不管是成功失敗，都會(huì)結(jié)束loading
return true
})
}
</script>獲取文章流量推薦曝光度隨便胡說八道兩句
vue3.0帶來了什么
1.性能的提升 打包大小減少41%初次渲染快55%,更新渲染塊133%內(nèi)存減少54%........
2.源碼的升級(jí) 使用Proxy代替defineProperty實(shí)現(xiàn)響應(yīng)式重寫虛擬DOM的實(shí)現(xiàn)和Tree-Sharking......
3.擁抱TypeScript vue3.0更好的支持TypeScript
4.新的特性
Composition API(組合api)
。 setup配置
。ref與reactive
。watch與watchEffect
。 provide和inject
。 .......
新的內(nèi)置組件
。 Fragment
。Teleport
。Suspense
其他改變
。新的生命周期鉤子
。data選項(xiàng)應(yīng)始終被聲明為一個(gè)函數(shù)
。移除keyCode支持作為v-on的修飾符
到此這篇關(guān)于Vue自定義名稱下載PDF的文章就介紹到這了,更多相關(guān)Vue自定義名稱內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中async-await的使用誤區(qū),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
父子組件之間的雙向綁定非常簡單，但是很多人因?yàn)槭菑腣ue 2+開始使用的，可能不知道如何雙向綁定，接下來通過本文給大家介紹Vue父子組件雙向綁定傳值的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-07-07
Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用深度學(xué)習(xí)
這篇文章主要介紹了Vue計(jì)算屬性與監(jiān)視(偵聽)屬性的使用,計(jì)算屬性指的是通過一系列運(yùn)算之后，最終得到一個(gè)值，watch監(jiān)視(偵聽)器允許開發(fā)者監(jiān)視數(shù)據(jù)的變化，從而針對(duì)數(shù)據(jù)的變化做特定的操作，本文就這兩種屬性給大家詳細(xì)講解，感興趣的朋友一起學(xué)習(xí)吧2022-11-11
Vue實(shí)現(xiàn)簡單選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue中常見的生命周期鉤子函數(shù)的使用,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
這篇文章主要為大家介紹了前端面試之vue2和vue3的區(qū)別有哪些，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了詳解vue-resource promise兼容性問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本文主要介紹了Vue如何設(shè)置el-table背景透明樣式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了詳解vue不同環(huán)境配置不同的打包命令，主要包括正式環(huán)境、測(cè)試環(huán)境和開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
我們的vue2.0項(xiàng)目當(dāng)中,存儲(chǔ)了許多圖片和視頻資源,所以我們需要增加防盜鏈設(shè)置,但是這樣一來,當(dāng)我們將其他網(wǎng)站上的視頻資源,想入到我們的環(huán)境當(dāng)中的時(shí)候,會(huì)報(bào)錯(cuò),所以本文給大家介紹了在vue中使用iframe解決視頻資源的防盜鏈,需要的朋友可以參考下2023-12-12