vue文件下载

2023-11-04

1.创建下载按钮

 <button @click="download" type="primary">下载</button>

2.调用接口获取服务端内容下载到本地

   //下载日志
      download() {
        this.$api.xxx.download(params1, params2,params3...).then((res) => {
            // console.log(res.data);
            const fileName = params1.name;
            const _res = res.data;
            const blob = new Blob([_res]);
            const downloadElement = document.createElement("a");
            const href = window.URL.createObjectURL(blob); // 创建下载的链接
            downloadElement.href = href;
            downloadElement.download = decodeURI(fileName); // 下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); // 点击下载
            document.body.removeChild(downloadElement); // 下载完成移除元素
            window.URL.revokeObjectURL(href); // 释放掉blob对象
          });
      },

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue文件下载 的相关文章

  • 如何使用鼠标单击选择多个项目?

    This is the default jQueryUI display as a Grid Layouts demo here http jqueryui com demos selectable display grid I can s
  • 设置 JavaScript 对象的 length 属性

    假设我有一个 JavaScript 对象 function a var A this length function return A length this add function x A push x this remove func
  • Angular JS - 如何验证数字输入中的位数

    我们想要做的是 有一个仅接受 0 24 的输入 对于时间输入应用程序 这些是用户应该能够输入到输入中的值 0 1 2 3 4 5 6 7 8 9 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
  • React 和 Leaflet 结合的好方法

    我正在开发一个将 React 和 Leaflet 结合起来的项目 但我必须说我在语义方面遇到了一些困难 由于大部分内容都是由 Leaflet 直接管理的 我不知道将 Leaflet 映射实例添加为 React 组件中的状态是否有意义 当涉及
  • 使用 vue.js 显示 json 结果

    您好 我尝试使用 vue js 显示 json 文件结果 目标是结果将显示在值上 这是我的代码 data return fetchData function var self this self http get api casetotal
  • React 测试库:当输入表单上的 fireEvent 更改时,给定元素没有值设置器

    我想改变的值材质用户界面 https material ui com components text fields TextField在反应测试库中 我已经设置了 data testid 然后使用getByTestId我拿起了输入元素 th
  • 自定义过滤器在 Angular Hybrid 应用程序中不起作用

    我正在尝试将 AngularJS 1 6 应用程序与 Angular 5 一起转换为混合应用程序 我定义了以下简单过滤器 function use strict var filterId colorPicker angular module
  • 错误:导航器只能包含“屏幕”组件作为其直接子组件

    我是 React Native 新手 收到此错误 但无法解决它 我正在遵循主要的教程反应导航页面 https reactnavigation org docs screen options resolution 但我无法完成它 我将不胜感激
  • 所有属性的 JavaScript getter

    长话短说 我现在的情况是想要一个 PHP 风格的 getter 但是是 JavaScript 的 我的 JavaScript 仅在 Firefox 中运行 因此 Mozilla 特定的 JS 对我来说没问题 我能找到的制作 JS gette
  • 不明白为什么 Chrome/Safari 无法在此处获取 ScrollHeight

    我只是问了一个问题 为什么某些 js 代码不能 100 在 Chrome 和 Safari 中工作 但经过更多故障排除后 我想我发现这是我应该发布的问题 我有一个页面 其中有一个表单 该表单的目标是同一页面上的 iframe iframe
  • 调整发散堆积条形图以使用通用更新模式

    我一直在使用可用的堆积条形图示例here https bl ocks org mbostock b5935342c6d21928111928401e2c8608使用以下代码 var data month Q1 2016 apples 384
  • 按位非运算符

    为什么要按位运算 0 打印 1 在二进制中 不是0应该是1 为什么 你实际上很接近 在二进制中 不是0应该是1 是的 当我们谈论一位时 这是绝对正确的 然而 一个int其值为0的实际上是32位全零 将所有 32 个 0 反转为 32 个 1
  • 需要了解Javascript函数提升示例

    我阅读了 Javascript 提升的概念 它非常令人困惑 但我看到了一些示例并了解了提升的实际作用 所以基本上 提升是 JavaScript 的默认行为 即将所有声明移动到当前作用域的顶部 当前脚本或当前函数的顶部 但我无法理解以下实现
  • 已安装 cypress npm 软件包,但缺少 Cypress 二进制文件

    大家好 我是 azure devops CI 的新手 我正在尝试通过在作业之间缓存 node modules 来减少管道构建时间 但我遇到了无法解决的错误 我正在使用 cypress 进行测试 这是我的天蓝色管道 Node js Build
  • 同步通用分析

    新的Universal Analytics重新引入了同步事件跟踪 https developers google com analytics devguides collection analyticsjs method reference
  • 如何在 C# 中通过 JavaScript 回调运行 QUnit 测试并获取测试结果?

    在我的几个项目中 我使用 MVC 模式将代码 关注点 分为 3 层 模型层和控制层都在 C 上运行 因此我使用 MSTest 或 NUnit 等测试框架来验证这些层的功能需求 对于视图层 我使用 QUnit 来测试 JavaScript 文
  • 内联 YouTube 视频在 iOS 上的 cordova 应用程序中不起作用

    我用 cordova 开发了一个移动应用程序 我确实需要能够播放内联 YouTube 视频 我尝试了一段时间来解决它 我设置了属性playsinline to 1在 YouTube iframe API 中 I put
  • JavaScript 反静默技术来指示失败

    当错误确实发生并且函数无法继续执行时 在 JavaScript 中报告错误而不是依赖 null 和 undefined 是一个好方法 我可以想到三种方法 没做什么 抛出异常 assert 这是一个简单的示例场景 一个将传入的金额记入用户帐户
  • jQuery 存储类型未定义

    我用了一个jQuery 存储 https ui5 sap com api jQuery sap storage存储数据 oStore jQuery sap storage jQuery sap storage Type local oSto
  • 如何通过 jQuery onblur 提交表单

    所以我尝试通过 jQuery onblur 提交表单 即一旦焦点离开密码字段 表单就会通过 jQuery 提交 有类似的问题 但这不是我要找的 我尝试使用 document getElementById 但它不起作用 任何帮助表示赞赏 提前

随机推荐