vue实现pdf文件下载

Vue实现PDF文件下载非常简单，只需要通过Vue的axios库向后端发送请求获取二进制PDF文件的数据流，然后将其转换为Blob对象，并使用URL.createObjectURL()将其转换为可下载的URL，接着再使用a标签的download属性实现下载即可。

具体实现如下：

1.安装axios库

npm install axios --save

2.在Vue组件中引入axios和FileSaver库

import axios from 'axios';
import FileSaver from 'file-saver';

3.在Vue组件方法中实现PDF文件下载

downloadFile() {
axios.get('http://localhost:8080/api/download/pdf', { responseType: 'arraybuffer' })
.then(response => {
const blob = new Blob([response.data], { type: 'application/pdf' });
const fileName = 'test.pdf';
FileSaver.saveAs(blob, fileName);
})
.catch(error => {
console.error('Error downloading PDF file', error);
});
}

4.在后端实现返回二进制PDF文件的接口

@RequestMapping(value = "/download/pdf", method = RequestMethod.GET)
@ResponseBody
public ResponseEntity<byte[]> downloadPDF() throws IOException {
File file = new File("test.pdf");
byte[] bytes = FileUtils.readFileToByteArray(file);
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_PDF);
headers.setContentDispositionFormData("attachment", "test.pdf");
headers.setContentLength(bytes.length);
return new ResponseEntity<byte[]>(bytes, headers, HttpStatus.OK);
}

以上是Vue实现PDF文件下载的简单示例，可以通过修改接口地址和文件名来适应不同的场景。同时，需要注意的是该方法需要在前端启动了服务器的情况下才能正常使用。