首页 > 其他分享 >整段 html实现其中的每一个 a 标签跨域下载操作 window.URL.createObjectURL(blob)

整段 html实现其中的每一个 a 标签跨域下载操作 window.URL.createObjectURL(blob)

时间:2024-07-25 16:07:44浏览次数:15  
标签:const 跨域 href 标签 aList window html blob

window.URL.createObjectURL(blob)

a 标签下载问题,通常在 a 标签中加上download属性,就可完成对href属性链接文件的下载,但仅仅是限于同源文件,如果是非同源,download 属性就会失效

第一种情况,单独的一个标签实现下载,可以使用 span 标签+click 事件模拟 a 标签的行为,

<span style="color: blue; cursor: pointer" @click="download()"></span>
function download() {
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "文件路径", true);
  xhr.responseType = "blob";
  xhr.onload = function () {
    const a = document.createElement("a");
    a.href = window.URL.createObjectURL(xhr.response);
    a.target = "_blank";
    a.download = "设置文件名";
    a.click();
    a.remove();
  };
  xhr.send();
}

第二种情况,是一整段 html 标签的文本,修改整段 html,实现其中的每一个 a 标签都可以完成下载操作。

创建了一个新的 Blob 对象,是一种二进制数据对象,可以用于存储和操作二进制数据。在这里使用 Blob 对象来存储一个文档的二进制数据。

第二个参数是一个对象,用于指定 Blob 对象的类型和编码方式。在这里指定了 Blob 对象的类型为 Word 文档(application/vnd.openxmlformats-officedocument.wordprocessingml.document),编码方式为 UTF-8(charset=UTF-8)。

Blob 对象可以用于下载或上传 Word 文档,或者在浏览器中预览 Word 文档。

<div v-html="content"></div>
const content = ref()
  function setAnodeAttr() {
  const html = document.getElementById('#content')
  const aList = html.getElementsByTagName('a')

  for (let i = 0; i < aList.length; i++) {
    aList[i].setAttribute('style', 'color: blue')
    const href = aList[i].getAttribute('href')
    const title = aList[i].getAttribute('title')

      await axios.get(href).then((res) => {
        const blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
        })
        aList[i].setAttribute('href', window.URL.createObjectURL(blob))
        aList[i].setAttribute('download', title)
      })
  }
    // html.innerHTML  拿到最终的 文本内容使用
    content.value = html.innerHTML
}

标签:const,跨域,href,标签,aList,window,html,blob
From: https://www.cnblogs.com/echoyya/p/17941406

相关文章

  • Window搭建NTP服务
    在Windows11上搭建NTP服务器,‌您可以按照以下步骤进行:‌配置网络设置:‌确保计算机连接到本地网络,‌具有稳定的网络连接。‌打开网络设置界面,‌检查IP地址、‌子网掩码和默认网关的设置是否正确。‌更改注册表设置:‌打开注册表编辑器(‌regedit)‌。‌导航到HKEY_LOCAL_MAC......
  • (三)复习第三课(07.20- 07.25第二轮):HTML标签元素练习大全
    <!DOCTYPEhtml><!--练习时间:2024.07.20-2024.07.25--><htmllang="en"><!--添加了en可以让你的网站打开时会提示翻译--><head> <pid="head1"></p><metacharset="utf-8"><!--对于中文网页需要使用此标签声明编码,否则会出现......
  • python flask允许跨域
    flask接口支持跨域设置方法在Flask中,可以通过安装flask-cors扩展来支持跨域请求。下面是使用flask-cors扩展的示例代码:fromflaskimportFlaskfromflask_corsimportCORS#ipinstallflask-corsapp=Flask(__name__)CORS(app)可以通过CORS扩展的origins参数......
  • Spring Boot解决跨域问题(端口不一致)
    目录一、什么是跨域二、跨域产生的原因三、当遇到不同端口之间的跨域访问时@CrossOrigin注解添加注解四、当解决完跨域问题发现发送请求时不带cookie问题情况: 解决:五,注意一、什么是跨域跨域是指在浏览器中,当一个网页的脚本试图去访问另一个网页的资源时,如果这两......
  • 通过SSH在Windows 11和Linux之间传输文件
    1.背景在多平台环境中进行文件传输是一项常见任务,尤其是在开发和运维过程中。Windows和Linux是两种常见的操作系统,尽管它们的文件系统和命令行界面有所不同,但通过安全外壳(SSH)协议可以实现无缝的文件传输。SSH不仅提供了安全的远程登录功能,还包括文件传输的能力,这对于跨平台数据交......
  • Windows 10 三国志13 14 没有声音
    1安装驱动精灵,安装声卡等驱动2打开驱动精灵--百宝箱--系统助手--软件问题--未知的DirectX错误--立即修复修复完成,重新启动win10主机,再次打开三国志13,就有声音(⊙﹏⊙)......
  • windows一键启动日常必用软件和网址脚本
    打开软件格式:start名称软件位置&打开网址格式:start名称浏览器位置网址地址&以Windows10系统为例,我们在桌面上点击右键,新建一个txt文档,在其中输入一行这样的命令:这段代码的第二个双引号start“”“C:\ProgramFiles(x86)\Tencent\TIM\Bin\QQScLauncher.exe”&p......
  • Windows常用的cmd命令
    在Windows操作系统中,CMD(命令提示符)是一种用于执行命令行操作的工具。以下是一些常用的CMD命令:1.dir -显示当前目录下的文件和文件夹。2.cd -更改当前目录。3.cd.. -返回上一级目录。4.mkdir -创建新目录。5.rmdir -删除空目录。6.del -删除文件。7.d......
  • 解决Windows找不到文件XXX。请确定文件名是否正确。(CSDN大多Ctrl+V,无法解决问题)
    直接进入正题,运行输入regedit,打开注册表打开之后复制下面这段路径计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsNT\CurrentVersion\ImageFileExecutionOptions当然咯,你一个个点开也不是不行哈哈。ImageFileExecutionOptions目录下有好多好多exe,找到你运行......
  • windows wsl ubuntu系统安装桌面可视化
    参考:https://www.bilibili.com/read/cv33557374/1)首先先安装好wslubuntu系统2)安装Ubuntu桌面版sudoaptpurge-yacpidacpi-supportmodemmanagersudoapt-markholdacpidacpi-supportmodemmanagersudoaptinstallubuntu-desktop3)配置显示管理器安......