Vue下载文件流

这篇具有很好参考价值的文章主要介绍了Vue下载文件流。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. List item

因功能需要用文件流做下载或导出功能,以下代码仅供参考

xls格式配置:

type: ‘application/vnd.ms-excel;charset=utf-8’,

xlsx格式配置:type:‘application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet;charset=utf-8’

<el-button type="primary" plain  @click="allDownload">下载</el-button>
methods:{
allDownload() {
      const params = this.exportAllParams
      console.log(params)
      // const params = JSON.parse(JSON.stringify(this.searchParams))
      delete params.current
      delete params.size
      delete params.total
      allExportList(params).then((res) => {
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        })
        const a = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        a.href = href
        a.download = '实时监控'
        document.body.appendChild(a)
        a.click()
        // console.log(a)
        document.body.removeChild(a)
        window.URL.revokeObjectURL(href)
      })
    },
}

文章来源地址https://www.toymoban.com/news/detail-725047.html

到了这里,关于Vue下载文件流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • #vue3 实现前端下载excel文件模板功能

    #vue3 实现前端下载excel文件模板功能

    一、需求: 前端无需通过后端接口,即可实现模板下载功能。 通过构造一个 JSON 对象,使用前端常用的 第三方库 xlsx ,可以直接将该 JSON 对象转换成 Excel 文件,让用户下载模板 二、效果: 三、源码如下:

    2024年01月19日
    浏览(48)
  • 【Java 实现文件下载】vue前端+java后端实现文件下载详解(附源码)

    【Java 实现文件下载】vue前端+java后端实现文件下载详解(附源码)

    【 写在前面 】前端时间总结了一下有关java文件上传的功能,也给不少读者带来一些帮助,因此今天继续完善文件下载这套体系,希望能给屏幕前的您带来实质性的帮助,其实文件下载最怕的就是中文乱码的现象,当然这个我单独写了一篇文章解释,这里不做详谈。 涉及知识

    2024年02月09日
    浏览(35)
  • vue下载pdf文件纯前端实现,不跳页面实现

    vue下载pdf文件纯前端实现,不跳页面实现

    一、引入download.js npm install downloadjs 地址:https://www.npmjs.com/package/downloadjs 注意:使用download.js时下载的文件内容为该文件的url(url和filename参数有中文的话下载后的文件会损坏打不开,需要修改源码) 二、复制一份下载好的downloadjs 文件 , 修改后的源码

    2024年02月12日
    浏览(34)
  • vue+xlsx实现前端模版下载、导入和导出excel文件

    vue+xlsx实现前端模版下载、导入和导出excel文件

    产品需求:后端不想写下载,导入和导出的接口,让我们前端自己实现。 这里我们就可以用xlsx插件来实现,我们不多说了,先放一下实现的图片,下面我们分别把模版下载、导入和导出的代码放上来,想用的话,直接复制粘贴即可! 模版下载图片 导出图片: 好了,下面我

    2024年02月13日
    浏览(34)
  • vue纯前端实现下载excel文件,本地和测试环境都可正常下载

    vue纯前端实现下载excel文件,本地和测试环境都可正常下载

    vue2纯前端实现下载excel文件,本地和测试环境都可正常下载。 1、把后端给的excel文件放到本地项目文件夹中,位置如图所示: 2、在需要展示下载功能的页面中引入该excel文件,如图所示: 3、使用a链接,href绑定引入的excel文件路径,并添加download属性,download属性值就是下载

    2024年02月13日
    浏览(32)
  • vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

    vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

      原理:主要是利用pdfh5这个插件来完成的   使用方法:   1.页面需要有一个容器例子:div id=\\\"demo\\\"/div   2.下载pdfh5插件 npm install pdfh5   (注意:webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)   解决方案:下载 node-polyfill-webpack-plugin npm install node-polyfill-

    2024年04月15日
    浏览(53)
  • vue-cli4前端实现下载本地Excel模板,以及下载静态文件的坑

    vue-cli4前端实现下载本地Excel模板,以及下载静态文件的坑

    a标签的下载功能: 1:bobl ----二进制流文件 Blob对象标识一个不可变、原始数据的类文件对象。Blob表示的不一定是JavaScript原生格式的数据 2:responseType responseType它表示服务器响应的数据类型,由于后台返回来的是二进制数据,所以要把它设为‘blob’ 通过设置responseType为blo

    2024年02月02日
    浏览(41)
  • Vue实战【后端返回文件流时,前端如何处理并成功下载流文件】

    Vue实战【后端返回文件流时,前端如何处理并成功下载流文件】

    哈喽小伙伴们,在我们日常工作当中,大家一定会遇到 文件导出 这样的功能需求点;导出功能前端后端都可以实现,通常情况下呢是由我们后端同事去处理的,那么当我们后端同事给你返回文件流的时候,前端要怎么处理并且完成下载呢?今天就给大家说个简单的方法,我

    2024年02月11日
    浏览(8)
  • vue前端获取项目下的静态资源文件夹中的文件并下载

    vue前端获取项目下的静态资源文件夹中的文件并下载

    前端项目/public/static/image文件夹下,两张图片,因为不会经常改变所以做成静态资源 从项目中获取这两张图片 html: 前端项目的 publicstaticfaultFile文件夹中放入模板文件: 实现效果: 代码: 前端下载使用 a 标签的自带的download下载 参考文章:require.context()的用法详解

    2024年02月12日
    浏览(35)
  • 免费下载xlsx.full.min.js包,并放入前端代码里,在html+vue中引用

    访问 xlsx.js 的 GitHub 页面:https://github.com/SheetJS/sheetjs 在 GitHub 页面中,找到 \\\"Code\\\" 按钮,然后点击它,在下拉菜单中选择 \\\"Download ZIP\\\",以下载 xlsx.js 的最新版本。 解压下载的 ZIP 文件。 在解压后的文件夹中,你会找到 xlsx.full.min.js 文件。将这个文件复制到你的前端项目中,通

    2024年02月02日
    浏览(30)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包