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

Posted on by

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自定義名稱內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：