vue前端接收后端文件流生成pdf

最新推荐文章于 2024-06-18 14:30:43 发布

Dreams.*

最新推荐文章于 2024-06-18 14:30:43 发布

阅读量2k

点赞数 2

文章标签：前端 pdf javascript

本文链接：https://blog.csdn.net/qq_54126505/article/details/127573918

版权

1、新建pdf.js

class pdf {
static download(data, name,isRandom = true) {
    const link = document.createElement('a')
    let blob = new Blob([data],{type: 'application/pdf;charset=utf-8'});
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob);
  
  
    if (isRandom) {
      let num = ''
      for(let i=0;i < 10;i++){
        num += Math.ceil(Math.random() * 10)
      }
      link.setAttribute('download', name)
    }else {
      link.setAttribute('download', name)
    }
  
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
  
}
export {
    pdf
  }

2、新建manage.js封装axios

export function exportction(url, parameter) {
  return axios({
    url: url,
    method: 'get',
    params: parameter,
    responseType: 'blob',
  })
}

3、请求后台接口

import { exportction } from '@/api/manage'; //导入axios
import { pdf} from '@/utils/pdf';//导入封装的pdf
class pdf{
 static async Report(data) {
    var date = new Date();
    var year = date.getFullYear();    //  返回的是年份
    var month = date.getMonth() + 1;  //  返回的月份上个月的月份，记得+1才是当月
    var dates = date.getDate();       //  返回的是几号
    const exportData = await exportction('url',data );
    pdf.download(exportData, '文件名'+year+month+dates+'.pdf', false);
  }
}
}
export {
  pdf
}