vue 从后台下载文件

// 调用后台接口
this.axios.post(url, param,{responseType: "blob",headers:{ 'Content-Type': 'application/json; application/octet-stream'} }.(res=>{
	this.downloadZip(res,'下载文件名')
}),
// 下载
downloadZip(res,name) {
    if(res.size>0){ // 判断文件是否存在
      let blob = new Blob([res], { type: "application/zip" });
      // { type: 'application/zip'} 下载压缩包
      let url = window.URL.createObjectURL(blob);
      const link = document.createElement("a"); // 创建a标签
      link.href = url;
      link.download = name; // 重命名文件
      link.click();
      URL.revokeObjectURL(url); // 释放内存
      this.clearDown()
    }else {
      this.$message.error('下载失败')
    }
  }

下载格式可以通过更改下载文件的类型(type:‘application/zip’),具体有以下这些类型

	'doc'       => 'application/msword',
    'bin'       => 'application/octet-stream',
    'exe'       => 'application/octet-stream',
    'so'        => 'application/octet-stream',
    'dll'       => 'application/octet-stream',
    'pdf'       => 'application/pdf',
    'ai'        => 'application/postscript',
    'xls'       => 'application/vnd.ms-excel',
    'ppt'       => 'application/vnd.ms-powerpoint',
    'dir'       => 'application/x-director',
    'js'        => 'application/x-javascript',
    'swf'       => 'application/x-shockwave-flash',
    'xhtml'     => 'application/xhtml+xml',
    'xht'       => 'application/xhtml+xml',
    'zip'       => 'application/zip',
    'mid'       => 'audio/midi',
    'midi'      => 'audio/midi',
    'mp3'       => 'audio/mpeg',
    'rm'        => 'audio/x-pn-realaudio',
    'rpm'       => 'audio/x-pn-realaudio-plugin',
    'wav'       => 'audio/x-wav',
    'bmp'       => 'image/bmp',
    'gif'       => 'image/gif',
    'jpeg'      => 'image/jpeg',
    'jpg'       => 'image/jpeg',
    'png'       => 'image/png',
    'css'       => 'text/css',
    'html'      => 'text/html',
    'htm'       => 'text/html',
    'txt'       => 'text/plain',
    'xsl'       => 'text/xml',
    'xml'       => 'text/xml',
    'mpeg'      => 'video/mpeg',
    'mpg'       => 'video/mpeg',
    'avi'       => 'video/x-msvideo',
    'movie'     => 'video/x-sgi-movie'
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端使用Vue发送请求下载PDF文件需要用到两个技术:axios和Blob。 首先,在Vue项目中安装axios: ``` npm install axios --save ``` 然后,在Vue组件中使用axios发送请求下载PDF文件: ```javascript import axios from 'axios' export default { methods: { downloadPDF() { axios({ url: 'your-backend-api', method: 'GET', responseType: 'blob' // 返回类型为blob }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])) const link = document.createElement('a') link.href = url link.setAttribute('download', 'file.pdf') // 下载文件名 document.body.appendChild(link) link.click() }) } } } ``` 在代码中,我们设置了axios的请求类型为'GET',返回类型为'blob'。当请求成功时,我们将response.data转换为Blob类型,创建URL并生成一个a标签用于下载。将a标签添加到body中,模拟用户点击下载。最后,我们需要注意设置下载文件文件名。 在后端,你需要设置响应头的Content-Type为'application/pdf',推荐使用node.js的mime模块来获取正确的Content-Type: ```javascript const fs = require('fs') const path = require('path') const mime = require('mime') app.get('/download', (req, res) => { const filePath = path.join(__dirname, 'file.pdf') const fileStream = fs.createReadStream(filePath) const contentType = mime.getType(filePath) res.setHeader('Content-Type', contentType) res.setHeader('Content-Disposition', 'attachment; filename=file.pdf') fileStream.pipe(res) }) ``` 在代码中,我们使用fs模块读取文件流,使用mime模块获取正确的Content-Type设置响应头。最后,将文件流通过管道pipe到响应中,完成下载

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值