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