vue下载与二进制数据流下载

1.安装file-saver插件

npm install file-saver --save

2.在页面中引入

import { saveAs } from "file-saver";

3.使用

// api 
export function downLoad() {
    return request({
        url: '/api/download',
        method: 'GET',
        responseType: 'blob',
    })
}
const blob = new Blob([数据流], { type: 类型 });
saveAs(blob, "文件名");

type:

        pdf文件:"application/pdf" 

        excel表格:"application/vnd.ms-excel"

其他扩展类型可在网上自行查找

### 如何下载包含二进制数据流的PDF文件 #### 使用Vue.js实现前端下载功能 为了从前端下载PDF文件,可以利用`axios`库发起HTTP请求并处理响应中的二进制数据流。下面是一个基于Vue.js框架的方法来获取服务器上的PDF文档: ```javascript // api export function downLoad() { return request({ url: '/api/download', method: 'GET', responseType: 'blob', // 设置responseType为'blob' }) .then(response => { const blob = new Blob([response.data], {type: 'application/pdf'}); let link=document.createElement('a'); link.href=URL.createObjectURL(blob); link.download="example.pdf"; // 设定下载后的文件名称 document.body.appendChild(link); link.click(); }); ``` 此代码片段展示了如何定义一个异步函数`downLoad()`用于触发API调用,并接收来自服务端的二进制内容作为Blob对象。之后创建了一个临时链接元素并通过JavaScript模拟点击事件完成实际下载操作[^5]。 #### 后端生成发送PDF文件(以PHP为例) 对于后端部分,在接收到客户端发出的请求后需负责构建PDF文档并将之编码成字节数组形式回传给浏览器。这里介绍一种借助于TCPDF库的方式来进行这项工作: 1. **安装依赖** - 利用Composer工具安装必要的软件包: ```bash composer require tecnickcom/tcpdf ``` 2. **编写控制器逻辑** 创建一个新的路由映射至特定的动作方法内执行如下任务——实例化TCPDF类、设置页面参数以及填充具体内容到模板里去;最后把最终产物转换成字符串格式输出给用户代理程序。 ```php use TCPDF; $pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false); // 初始化文档属性... // 添加一页或多页... ob_clean(); // 清除缓冲区 header('Content-Type: application/pdf'); header('Content-Disposition: attachment;filename="output.pdf"'); echo $pdf->Output('output.pdf', 'S'); // S表示返回PDF文本而不是保存本地磁盘上 exit; ``` 上述过程确保了当访问者浏览网页时能够顺利地接收到由应用程序动态产生的电子档副本[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值