首頁 > 軟體

Vue自定義名稱下載PDF的方法

2022-08-20 18:00:20

1.執行Vue指令,安裝相對應外掛。(在指定的Vue檔案下執行)

npm install downloadjs 

2.其次在專案中引入安裝相對應的外掛(不引入是無法使用匯入功能的)

import download from "downloadjs";

3.下載方法的具體程式碼描述。(下載PDF程式碼和自定義名字命名進行匯出PDF的程式碼)

function down() {
    var fileName = "自定義檔案命名哦"
    var url = state.source;   //檔案來源(URL或者本地檔案路徑state.source)
    // 請求進來,就可以加在loading
    fetch(url).then(res => {
        return res.blob()
    }).then(blob => {
        // 這是一個外部參照的download.js檔案,這個檔案
        download(blob, fileName)
        // 下載結束,loading結束
    }).catch(err => {
        console.log(err)
        return false
    }).finally(res => {
        // 這裡也可以結束loading。不管是成功失敗,都會結束loading
        return true
    })
}

總結(直接複製整體根據直接程式碼環境和框架微微修改一下即可完成):

<template>
   <button  @click="down">當前檔案匯出</button>
</template>
<script setup lang="ts">
import download from "downloadjs";
// 下載PDF區域
function down() {
 
    var fileName = "自定義檔案命名哦"
    var url = state.source;    //檔案來源(URL或者本地檔案路徑)
 
    // 請求進來,就可以加在loading
    fetch(url).then(res => {
        return res.blob()
    }).then(blob => {
        // 這是一個外部參照的download.js檔案,這個檔案
        download(blob, fileName)
        // 下載結束,loading結束
    }).catch(err => {
        console.log(err)
        return false
    }).finally(res => {
        // 這裡也可以結束loading。不管是成功失敗,都會結束loading
        return true
    })
}
</script>

獲取文章流量推薦曝光度隨便胡說八道兩句

vue3.0帶來了什麼

1.效能的提升 打包大小減少41%初次渲染快55%,更新渲染塊133%記憶體減少54%........

2.原始碼的升級 使用Proxy代替defineProperty實現響應式重寫虛擬DOM的實現和Tree-Sharking......

3.擁抱TypeScript vue3.0更好的支援TypeScript

4.新的特性

Composition API(組合api)

。 setup設定

。ref與reactive

。watch與watchEffect

。 provide和inject

。 .......

新的內建元件

。 Fragment

。Teleport

。Suspense

其他改變

。新的生命週期勾點

。data選項應始終被宣告為一個函數

。移除keyCode支援作為v-on的修飾符

到此這篇關於Vue自定義名稱下載PDF的文章就介紹到這了,更多相關Vue自定義名稱內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com