vue實(shí)現(xiàn)word，pdf文件的導(dǎo)出功能
更新時(shí)間：2018年07月31日 10:19:21 作者：晏紫蘇_cc
這篇文章給大家介紹了vue實(shí)現(xiàn)word或pdf文檔導(dǎo)出的功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
vue實(shí)現(xiàn)word或pdf文檔導(dǎo)出的功能，我的項(xiàng)目是：后端返回一個(gè)文檔流(下圖)，然后前端對(duì)文檔流做處理進(jìn)行下載，代碼如下：
import axios from 'axios';
axios.get(`url`, { //url: 接口地址
responseType: `arraybuffer` //一定要寫
})
.then(res => {
if(res.status == 200){
let blob = new Blob([res.data], {
type: `application/msword` //word文檔為msword,pdf文檔為pdf
});
let objectUrl = URL.createObjectURL(blob);
let link = document.createElement("a");
let fname = `我的文檔`; //下載文件的名字
link.href = objectUrl;
link.setAttribute("download", fname);
document.body.appendChild(link);
link.click();
}else {
this.$message({
type: "error",
message: "導(dǎo)出失敗"
})
}
});
后端返回的文檔流的格式：
PDF格式:
word格式：
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)word，pdf文件的導(dǎo)出功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在Vue3項(xiàng)目中實(shí)現(xiàn)頁面截圖的功能,可以通過使用js-web-screen-shot組件來實(shí)現(xiàn),本文以toolbox.js作為案例,詳細(xì)介紹了如何在Vue3框架下,利用js-web-screen-shot組件實(shí)現(xiàn)頁面截圖的具體步驟和方法,這一技術(shù)的應(yīng)用,不僅可以提高用戶體驗(yàn),還能在需要時(shí)方便地獲取頁面的即時(shí)信息2024-10-10
vue使用axios時(shí)關(guān)于this的指向問題詳解
最近在學(xué)習(xí)使用vue+axios，在使用中發(fā)現(xiàn)了一個(gè)問題，下面總結(jié)分享給大家，這篇文章主要給大家介紹了關(guān)于vue使用axios時(shí)this的指向問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-12-12
vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
在Vue中一般很少會(huì)用到直接操作DOM，但不可避免有時(shí)候需要用到，這時(shí)我們可以通過ref和$refs這兩個(gè)來實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue3中$refs的基本使用方法,需要的朋友可以參考下2022-03-03
vue element后臺(tái)鑒權(quán)流程分析
這篇文章主要介紹了vue element后臺(tái)鑒權(quán)流程分析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
Vue3?pinia管理數(shù)據(jù)的3種方式代碼
在Vue3中Pinia是一個(gè)狀態(tài)管理庫,它提供了一種簡(jiǎn)單而強(qiáng)大的方式來管理應(yīng)用程序的狀態(tài),這篇文章主要給大家介紹了關(guān)于Vue3?pinia管理數(shù)據(jù)的3種方式,需要的朋友可以參考下2024-04-04
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡(jiǎn)版），可作為模板進(jìn)行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了詳解vue不同環(huán)境配置不同的打包命令，主要包括正式環(huán)境、測(cè)試環(huán)境和開發(fā)環(huán)境，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法
這篇文章主要給大家介紹了Vue3中el-table表格數(shù)據(jù)不顯示的原因和解決方法,文中有詳細(xì)的代碼示例供大家參考,如果有遇到相同問題的朋友可以參考閱讀本文,希望能夠幫到您2023-11-11
Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明
這篇文章主要介紹了Vue中foreach數(shù)組與js中遍歷數(shù)組的寫法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-06-06