首页 > 其他分享 >vue 根据url来下载文件

vue 根据url来下载文件

时间:2023-11-30 20:00:13浏览次数:34  
标签:vue url URL blob error document 下载

服务端返回了一个pdf url ,直接点击变成了预览。

下载方式:

let fileUrl = 'http://file地址替换成自己的';
            let fileName = '文件下载时的文件名';
            fetch(fileUrl)
              .then((response) => response.blob())
              .then((blob) => {
                // 创建一个临时的URL对象
                const url = URL.createObjectURL(blob);
                // 创建一个隐藏的<a>标签,并设置其href属性为临时URL
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName; // 设置下载的文件名
                a.style.display = 'none';
                // 将<a>标签添加到文档中,并模拟点击下载
                document.body.appendChild(a);
                a.click();
                // 下载完成后,移除<a>标签和临时URL对象
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
              })
              .catch((error) => {
                console.error('下载文件时出错:', error);
              });

 

来自:

https://www.cnblogs.com/ZhaoHS/p/17705050.html

标签:vue,url,URL,blob,error,document,下载
From: https://www.cnblogs.com/jiduoduo/p/17868140.html

相关文章

  • 通过.NET Core+Vue3 实现SignalR即时通讯功能
    .NETCore和Vue3结合使用SignalR可以实现强大的实时通讯功能,允许实时双向通信。在这个示例中,我们将详细说明如何创建一个简单的聊天应用程序,演示如何使用.NETCoreSignalR后端和Vue3前端来实现实时通讯功能。步骤1:准备工作确保你已经安装了以下工具和环境:.NETCore......
  • C/C++ 实现FTP文件上传下载
    FTP(文件传输协议)是一种用于在网络上传输文件的标准协议。它属于因特网标准化的协议族之一,为文件的上传、下载和文件管理提供了一种标准化的方法,在Windows系统中操作FTP上传下载可以使用WinINet库,WinINet(WindowsInternet)库是Windows操作系统中的一个网络API库,用于访问Interne......
  • Vue网站发布到iis后提示404页面不可访问
    参考:https://www.cnblogs.com/yhnet/p/14804869.htmlvue重定向和跨域配置:https://zhuanlan.zhihu.com/p/5306882511.安装组件:URLRewrite:https://www.iis.net/downloads/microsoft/url-rewriteApplicationRequestRouting:https://www.iis.net/downloads/microsoft/application-re......
  • 当多个使用弹窗类组件,可使用这种方式封装组件。(以下使用antd-vue、vue3)
    1.代码点击查看代码<template><slot:openDialog="openDialog":closDialog="modalCancel"></slot><a-modalv-model:open="open"title="BasicModal"@cancel="modalCancel"><templat......
  • Ajax处理文件流下载
    文件流下载封装/**AJAX请求后端返回文件流下载处理*@param{object}option下载请求选项配置*@param{string}option.method请求方式POST|GETetc.*@param{string}option.url请求地址*@param{string}option.filename文件下载名称*@param{number}option......
  • 1、vue初体验
    1、在页面上引用vue.mim.js文件,有个 min的是压缩的意思。<scripttppe="../vue.min.js"></script>2、在页面上添加div元素,然后添加一个列表,让产品展示出来 <div id="showPage">  <h1>系统名称:{{ title}}  </h1> <ul>   <li v-for=&quo......
  • vue3,Nginx部署情况
    一.Vue3项目情况说明router文件夹下的index.jsimport{createRouter,createWebHashHistory}from"vue-router"constroutes=[{path:'/saoma',name:'Saoma',//redirect:'/saoma',component:()......
  • 零代码编程:用ChatGPT批量下载某个网页中的特定网页链接
    以lexfridman的官方网站为例,https://lexfridman.com/podcast/,如何批量下载网页呢?查看网页源文件,播客transcript的链接是:<ahref="https://lexfridman.com/jared-kushner-transcript">Transcript</a>文件标题在这里:<title>TranscriptforJaredKushner:Israel,Palestine,Hamas......
  • python flask下载功能
    前言flask下载功能一、约定要下载文件绝对路径:/tmp/flask_web/download/test.tar.gzpy主程序:/tmp/flask_web/main.py二、main.py内容@app.route("/down/<path:filename>",methods=['GET','POST'])defdownload_file(filename):try:#......
  • vue关于自定义指令
    私有自定义指令(在与data()同级结构中进行配置)//私有自定义指令的节点directives:{//定义名为color的指令,指向一个配置对象color:{//当指令第一次被绑到元素上的时候,会立即触发bind函数,只会调用一次//形参中的el表示当前指令所绑定到的那个d......