vue下載本地xls模版靜態文件

需求導入的下載模版不想放在服務器放在前端本地下載靜態資源最簡單的方式直接訪問 public 文件夾下的文件

方法一:使用靜態文件路徑
將文件放在 public 文件夾中:
把你的文件從 src/assets 移動到 public 文件夾。例如:public/template.xls。
在 Vue 組件中使用相對路徑:

<template><div><button @click="downloadTemplate">下載模板</button></div>
</template><script>
export default {methods: {downloadTemplate() {// 使用相對路徑const fileUrl = '/template.xls';// 創建一個隱藏的a標簽const link = document.createElement('a');link.href = fileUrl;link.download = 'template.xls';  // 設置下載文件名// 將a標簽添加到DOM并觸發點擊事件document.body.appendChild(link);link.click();// 移除a標簽document.body.removeChild(link);}}
}
</script><style scoped>
/* 你的樣式代碼 */
</style>

二、確保項目目錄如下

my-vue-project/
├── public/
│   └── template.xls
├── src/
│   ├── assets/
│   ├── components/
│   └── App.vue
└── vue.config.js

三、驗證
啟動你的開發服務器,通常是 npm run serve或npm run dev。
直接在瀏覽器中訪問 http://localhost:9000/template.xlsx 看是否能訪問到文件。

通過以上步驟,應該能夠確保靜態文件能夠正確訪問和下載

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/35763.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/35763.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/35763.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【高考志愿】電氣工程

目錄 一、專業概述 二、專業特點 三、就業前景 四、選擇學校 高考志愿選擇電氣工程是一個極具智慧和遠見的決定&#xff0c;因為電氣工程在當今社會中扮演著至關重要的角色。以下是對電氣工程專業更為詳細的解析&#xff1a; 一、專業概述 電氣工程及其自動化專業&#xf…

一個項目學習Vue3---快速認識JSX

JSX&#xff08;JavaScript XML&#xff09;是一種用于在React框架中編寫UI組件的語法擴展。它允許開發者將HTML標記直接嵌入到JavaScript代碼中&#xff0c;使得在React組件中編寫界面變得更加直觀和高效。在編譯過程中&#xff0c;JSX會被轉換成普通的JavaScript對象&#xf…

工業液晶屏G065VN01 V2規格書簡介

G065VN01 V2 背面實物圖 2. 概述 G065VN01 V2 專為 VGA &#xff08;640 x RGB x 480&#xff09; 分辨率和 16.2M&#xff08;RGB 6 位 FRC&#xff09;或 262k 色&#xff08;RGB 6 位&#xff09;的工業顯示應用而設計。它由TFT-LCD面板、驅動IC、控制和電源電路板以及包括…

css3實現水紋進度條

其實有一個mask-image屬性 挺有意思&#xff0c;在元素上面實現遮罩層的效果&#xff0c;不過這玩意有些兼容性問題 需要處理&#xff0c;所以單純可以通過漸變色的方式來實現 同時加上動畫效果 .jianbian {width: 100%;height: 16px;background-color: #eee;display: flex;bor…

華三中小企業組網

一、組網需求 在中小園區中&#xff0c;S5130系列或S5130S系列以太網交換機通常部署在網絡的接入層&#xff0c;S5560X系列或 S6520X系列以太網交換機通常部署在網絡的核心&#xff0c;出口路由器一般選用MSR系列路由器。 核心交換機配置VRRP保證網絡可靠性。園區網中不同的…

MySQL進階——鎖

目錄 1全局鎖—一致性數據備份 1.1全局鎖介紹 1.2語法 1.3 一致性備份案例 1.4 全局鎖特點 2表級鎖 2.1表鎖 2.1.1共享讀鎖 2.1.2獨占寫鎖 2.2元數據鎖 2.3元數據鎖 MySQL中的鎖&#xff0c;按照鎖的粒度分&#xff0c;分為以下三類&#xff1a; &#xff08;1&…

GitLab配置免密登錄之后仍然需要Git登錄的解決辦法

GitLab配置免密登錄之后仍然需要Git登錄的解決辦法 因為實習工作需要&#xff0c;要在本地拉取gitlab上的代碼&#xff0c;設置了密鑰之后連接的時候還需要登錄的token&#xff0c;摸索之后有了下面的解決辦法。 方法一&#xff1a; 根據報錯的提示&#xff0c;去網站上設置個人…

動手學自然語言處理:解讀大模型背后的核心技術

自從 ChatGPT 橫空出世以來&#xff0c;自然語言處理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09; 研究領域就出現了一種消極的聲音&#xff0c;認為大模型技術導致 NLP “死了”。在某乎上就有一條熱門問答&#xff0c;大家熱烈地討論了這個問題。 有…

【STM32】看門狗

1.看門狗簡介 看門狗起始就是一個定時器&#xff0c;從功能上說它可以讓微控制器在程序發生意外&#xff08;程序進入死循環或跑飛&#xff09;的時候&#xff0c;能重新恢復到系統剛上電狀態&#xff0c;以保障系統出問題的時候可以重啟一次。說的簡單一點&#xff0c;看門狗…

用英文介紹孟買:Mumbai India‘s Transforming MEGACITY

Mumbai: India’s Transforming MEGACITY Link: https://www.youtube.com/watch?vtWD_-Rzrn8o Summary First Paragraph: Mumbai, India’s financial and entertainment capital, is undergoing a major transformation. With its contiguous urban population nearing 25…

神經網絡實現AND門:邏輯運算的智能化飛躍

神經網絡實現AND門&#xff1a;邏輯運算的智能化飛躍 在人工智能的早期探索中&#xff0c;人們就夢想著用機器模擬人腦的邏輯思考能力。AND邏輯函數作為最基本的邏輯運算之一&#xff0c;其在神經網絡中的實現&#xff0c;標志著我們向智能化邁出了堅實的一步。本文將詳細解釋…

web圖片怎么導入ps?這個方法給你輕松解決!

隨著WebP格式圖片因其體積小、加載快的優勢在網站中日益普及&#xff0c;對于圖片編輯者來說&#xff0c;能夠直接在Photoshop中打開和編輯WebP文件變得尤為重要。 WebPShop插件應運而生&#xff0c;它是一個專為Photoshop設計的模塊&#xff0c;支持打開和保存WebP圖像&#…

ATFX匯市:澳大利亞5月CPI大增0.4百分點,降息預期顯著降溫

ATFX匯市&#xff1a;據澳大利亞統計局數據&#xff0c;澳大利亞5月加權CPI年率為4%&#xff0c;高于前值3.6%&#xff0c;高于預期3.8%&#xff0c;顯示出澳大利亞通脹率頗具韌性。5月份數據公布之前&#xff0c;月度CPI年率平均波幅不足0.1個百分點&#xff0c;呈現出橫盤震蕩…

《數字圖像處理》實驗報告六

一、實驗任務與要求 比較采用不同的色彩空間對彩色圖像處理的效果&#xff0c;處理包括&#xff1a; a&#xff09;直方圖均衡化 b&#xff09;圖像增強 二、實驗報告 &#xff08;一&#xff09;RGB色彩空間的直方圖均衡化 / 銳化處理 1、matlab 實現代碼&#xff1a; %…

C語言 用getchar函數讀入兩個字符給c1和c2,然后分別用putchar函數和printf函數輸出

用getchar函數讀入兩個字符給c1和c2&#xff0c;然后分別用putchar函數和printf函數輸出這兩個字符并且解答以下三個問題&#xff1a; 1.變量c1和c2應定義為字符型&#xff0c;整形&#xff0c;還是二者皆可&#xff1f; 2.要求輸出c1和C2的ASCII碼&#xff0c;應如何處理&am…

推薦系統(LLM去偏?) | (WSDM24)預訓練推薦系統:因果去偏視角

::: 大家好&#xff01;今天我分享的文章是來自威斯康星大學麥迪遜分校和亞馬遜AWS AI實驗室的最新工作&#xff0c;文章所屬領域是推薦系統和因果推理&#xff0c;作者針對跨域推薦中的偏差問題提出了一種基于因果去偏的預訓練推薦系統框架PreRec。 ::: 原文&#xff1a;Pre-t…

【MySQL進階之路 | 小結篇】MySQL鍵約束KEY與索引INDEX

1. 鍵約束 關鍵字key 比如UNIQUE KEY就是一個唯一性約束&#xff0c;用于確保表中的某一列或多列的組合具有唯一性&#xff0c;不允許有重復值.當定義一個唯一性約束的時候&#xff0c;會自動創建一個唯一性索引來支持這一約束&#xff0c;這意味著它同時也起到了索引的作用.…

mobaXterm上傳文件進度一直為0%

在這里修改了senssion、重啟都沒有用 最后發現是文件存放的路徑中不能有中文&#xff0c;改了之后就成功上傳了

開展FMEA培訓時需要做好哪些準備?

FMEA&#xff08;失效模式與影響分析&#xff09;作為一種預防性的質量工具&#xff0c;正逐漸成為當代企業提升產品競爭力的關鍵。然而&#xff0c;很多企業在開展FMEA時&#xff0c;卻常常因為準備工作不足而事倍功半。那么&#xff0c;開展FMEA培訓時需要做好哪些準備呢&…

Jenkins流水線發布,一篇就解決你的所有疑惑

這次搭建的項目比較常規,前端是react寫的,后端是springboot,并且由于是全棧開發,所以是在同一個項目中。接下來我演示下怎么用jenkins進行自動化發布。 1.jenkins必裝插件 這里用到的是jenkinsFile主要是基于Groovy這個沙盒,有些前置插件。這里使用maven進行打包,所以需…