Spring Boot Vue文件下載
很多時候我們需要在網站上提供給用戶可以下載的文件,如PDF文檔、圖片、音頻等等,通過使用Spring Boot和Vue,我們可以輕松地在我們的應用程序中實現文件下載功能。
首先,我們需要將要下載的文件放入我們的應用程序中的某個文件夾內。在這里,我們將這個文件夾稱為“downloads”。
接下來,我們需要定義一個Spring Boot REST API來允許我們從“downloads”文件夾中下載文件。
@GetMapping("/download/{fileName:.+}") public ResponseEntity<Resource> downloadFile(@PathVariable String fileName) throws MalformedURLException { // Define the file path Path filePath = Paths.get("downloads").resolve(fileName).toAbsolutePath(); Resource resource = new UrlResource(filePath.toUri()); // Check if the file exists if (!resource.exists()) { throw new IllegalArgumentException("File not found: " + fileName); } // Define the response headers HttpHeaders headers = new HttpHeaders(); headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\""); // Define the response entity return ResponseEntity.ok() .headers(headers) .contentLength(resource.contentLength()) .contentType(MediaType.parseMediaType("application/octet-stream")) .body(resource); }
在這個代碼塊中,我們定義了一個GET映射到“/download/{fileName:.+}”,其中fileName是我們要下載的文件名。我們首先通過傳遞的文件名來獲取文件的絕對路徑,然后使用“UrlResource”創建一個Spring Resource對象,該對象可以從絕對路徑創建。我們檢查資源是否存在,并為響應頭定義一些必要的信息。最后,我們使用Spring ResponseEntity按預期將文件下載到客戶端。
現在,我們要為我們的應用程序提供一個用戶友好的界面,來允許用戶通過單擊一個按鈕下載文件。我們可以通過在Vue組件中定義一個HTTP GET請求來實現這一點。
<template> <div> <button v-on:click="downloadFile" >Download</button> </div> </template> <script> export default { methods: { downloadFile() { const fileName = '<file_name>'; // replace with your file name const url = `http://localhost:8080/download/${fileName}`; this.$http .get(url, { responseType: 'blob' }) .then(response =>{ const link = document.createElement('a'); link.href = window.URL.createObjectURL(new Blob([response.data])); link.download = fileName; link.click(); }); } } } </script>
在這個代碼塊中,我們定義了一個Vue組件,并在一個按鈕單擊事件上綁定了“downloadFile”方法。在這個方法中,我們定義了文件名以及API調用的URL,然后使用axios庫進行HTTP GET請求。使用“responseType: 'blob'”選項,我們可以向服務器請求二進制數據。在響應中,我們將下載URL添加到一個“a”元素的“href”屬性中,然后設置下載屬性,這將強制瀏覽器開始文件下載。最后,我們模擬了一個按鈕單擊事件,從而使文件下載開始。
通過上述步驟,我們現在已經可以簡單地實現文件下載功能了。