后端返回二进制流,前端处理二进制文件流,实现预览图片以及PDF

这篇具有很好参考价值的文章主要介绍了后端返回二进制流,前端处理二进制文件流,实现预览图片以及PDF。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、首先预览PDF需要后端将响应头Content-Type 设置为PDF类型application/pdf,不能预览,会直接下载

2、前端定义接口:并设置相应类型responseTypeblob

// 合同预览Pdf
export function viewContractTypePdf(id) {
  return request({
    url: `/attract/talentApartment/exportContract/${id}`,
    method: "get",
    responseType: "blob"
  })
}
  1. 请求数据:通过window.URL.createObjectURL(res)转成本地预览地址, 在通过window.open()方法打开转成本地预览地址即可预览PDF,如下图

后端返回二进制文件流,js,vue2,javascript,vue.js,Powered by 金山文档

图一

  1. 预览图片:直接将window.URL.createObjectURL(res)转成的本地预览地址赋值给Img的src即可展示图片文章来源地址https://www.toymoban.com/news/detail-613148.html

// vue中
// template
<el-image :src="imgUrl" fit="fill" ></el-image>


//methods
handleViewPDF() {
   viewContractTypePdf(this.baseInfo.talentId).then(res => {
     this.imgUrl = window.URL.createObjectURL(res)
   })
}

到了这里,关于后端返回二进制流,前端处理二进制文件流,实现预览图片以及PDF的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端处理二进制流文件导出为excel表

    将后端返回的二进制流文件 导出为excel表 用的时候直接调用showConfirm函数即可 最后效果 get接口是自己封装的,封装如下

    2024年02月11日
    浏览(43)
  • 前端:JS:将图片转为二进制与其他文本传入后端

    在前端,可以将图片转换为二进制数据,并将其与其他文本字符串一起发送到后端。一种常见的方法是将所有数据组合为一个 FormData 对象,然后通过 AJAX 或 Fetch API 将其发送给后端。以下是一个示例: 解释 : 当文件输入框内容发生变化时,会触发 change 事件。然后,它会读

    2024年04月26日
    浏览(41)
  • Vue前端处理blob二进制对象图片的方法

    近期在做开发的时候遇到一个问题,前端传递一个参数,后端返回一张图片,前端再将该图片展示出来,由于是第一次处理二进制图片对象,特此记录一下。 首先,已知后端接口无误,传递参数可以正常返回图片    前端调用接口,打印并查看获取到的响应数据:     显然

    2024年02月16日
    浏览(51)
  • SSM 前端使用AJAX方式,fromdata文件格式上传二进制流文件

    今天在上课的时候,遇到了一个比较坑的问题,有个学生拿来了她的代码,让我给她看看为什么传值传不过来。 首先,前端是这样的: 后端是这样的: 然后上传文件的配置器是这样的: 她遇到的第一个问题是,后端这里接受值的时候,接受到的id和文件都是null,然后再后续

    2024年02月10日
    浏览(77)
  • 写一个函数返回参数二进制中 1 的个数(c语言三种实现方法)

    (本文旨在自己做题时的总结,我会给出不同的解法,后面如果碰到新的题目还会加入其中,等于是我自己的题库。 方法一: 方法二: 这里说一个方法,任何一个进制数%它的进制位都可以得到它的最低位,任何一个进制数 / 它的进制位都可以将最低位丢弃。比如: 这样我

    2024年02月13日
    浏览(50)
  • 解决前端二进制流下载的文件(例如:excel)打不开的问题

    1. 现在后端请求数据后,返回了一个二进制的数据,我们要把它下载下来。 这是响应的数据: 2. 这是调用接口的地方:  使用了file-saver插件:github地址 3. 这时如果直接下载的话,打开文件就会失败 4. 这时就必须要在调接口的时候做一下处理 responseType: \\\'arraybuffer\\\', 这个必须

    2024年02月04日
    浏览(127)
  • Python读取二进制文件:深入解析与技术实现

    目录 一、引言 二、二进制文件的基础 1、二进制文件的组成 2、二进制文件的编码 三、Python读取二进制文件的方法 1、使用内置函数open() 2、使用numpy库 四、处理读取的二进制数据 1、解析数据 2. 转换数据类型 五、总结与展望 1、高效读取二进制文件 2、处理复杂的二进制文件

    2024年02月04日
    浏览(41)
  • 微信小程序获取后台返回的二进制图片

    获取后台返回的二进制图片需要先使用wx.request方法发起网络请求获取图片数据,然后将返回的数据用wx.arrayBufferToBase64方法进行转换,最后将转换后的数据绑定到图片的src属性即可。 参考代码如下 其中,url为后台返回的图片地址,responseType为返回的数据类型为二进制数组。在

    2024年02月10日
    浏览(64)
  • 通过 Blob 对二进制流文件下载实现文件保存下载

    原理 : 前端将二进制文件做转换 实现下载:请求后端接口-接收后端返回的二进制流(通过二进制流( Blob )下载, 把后端返回的二进制文件放在 Blob 里面)-再通过 file-saver 插件保存 需求背景 业务:下载模板文件 页面上使用: 保存文件: 发起请求通用方法(更改 axios 的 re

    2024年02月09日
    浏览(70)
  • 拷贝音频、视频、word等二进制文件的实现方法,不掉帧

    拷贝音频、视频、word等二进制文件的实现方法:  演示使用BufferedOutputStream 和 BufferedInputStream 使用  使用他们,可以完成二进制文件  思考:字节流可以操作二进制文件,可以操作文本文件吗?True

    2024年02月07日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包