首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

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

编程知识
2024年07月25日 15:00

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
}

From:https://www.cnblogs.com/echoyya/p/17941406
本文地址: http://www.shuzixingkong.net/article/421
0评论
提交 加载更多评论
其他文章 Cython与C函数的结合
这篇文章介绍了Python-Cython-C三种语言的简单耦合,以Cython为中间接口,实现Python数据传到C语言的后端执行相关计算。这就相当于可以在Python中调用C语言中的指针功能来进行跨维度的数组运算,至于性能依然存在优化空间,这里仅仅做一个简单的功能演示。
Nuxt.js 环境变量配置与使用
title: Nuxt.js 环境变量配置与使用 date: 2024/7/25 updated: 2024/7/25 author: cmdragon excerpt: 摘要:“该文探讨了Nuxt.js框架下环境变量配置的详细过程,涉及.env文件配置、运行时访问、安全性考量、在不同场景下的实践(
Nuxt.js 环境变量配置与使用 Nuxt.js 环境变量配置与使用
【最新最热】几何朗兰兹猜想终获破解!跨越30年研究,800余页证明论文问世,中国学者陈麟卓越贡献!
历经三十余载的潜心研究,九位杰出的数学家携手跨越了学术的崇山峻岭,通过五篇累计超过八百页的深邃论文,终于迎来了数学史上的一大盛事——几何朗兰兹猜想的壮丽证明! 这一里程碑式的成就,正是朗兰兹纲领几何化版本的璀璨绽放。朗兰兹纲领,作为现代数学研究的璀璨明珠,被誉为“数学的大统一理论”,它深刻地揭示了数
【最新最热】几何朗兰兹猜想终获破解!跨越30年研究,800余页证明论文问世,中国学者陈麟卓越贡献! 【最新最热】几何朗兰兹猜想终获破解!跨越30年研究,800余页证明论文问世,中国学者陈麟卓越贡献! 【最新最热】几何朗兰兹猜想终获破解!跨越30年研究,800余页证明论文问世,中国学者陈麟卓越贡献!
开源照片管理神器 PhotoPrism 安装和使用教程
如今我们每个人都积累了海量的照片和视频,做自媒体的 UP 主们积累的照片和视频数量可能更多。面对这么多的照片和视频,我们该如何管理呢? 之前我一直用谷歌相册,因为它有很多优势,比如无限空间,支持智能整理 (按时间线、地理位置、还支持人脸自动合并)。但去年 Google 开始对空间进行了限制,不再提供
开源照片管理神器 PhotoPrism 安装和使用教程 开源照片管理神器 PhotoPrism 安装和使用教程 开源照片管理神器 PhotoPrism 安装和使用教程
Rust 中 *、&、mut、&mut、ref、ref mut 的用法和区别
*:解引用操作符,用于访问指针或引用指向的值的类型。 &:借用操作符,用于创建不可变引用的类型,允许只读访问。 mut:关键字,用于声明可变变量或参数的类型,允许其值被修改。 &mut:借用操作符,用于创建可变引用的类型,允许读写访问。 ref:模式匹配中的关键字,用于创建不可变引用的类型,避免所有
LeetCode513. 找树左下角的值
题目链接:https://leetcode.cn/problems/find-bottom-left-tree-value/description/ 题目叙述: 给定一个二叉树的 根节点 root,请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: roo
LeetCode513. 找树左下角的值 LeetCode513. 找树左下角的值
三星app移植修复(app反编译修改)
工具: apktool ADT 命令: 反编译 java -jar apktool.jar d test.apk 重打包 java -jar apktool.jar b test 签名使用ADT smail语言粗略理解(其实对于修改来说, 大概熟悉就就ok) 类定义 .class public Lc
三星app移植修复(app反编译修改) 三星app移植修复(app反编译修改) 三星app移植修复(app反编译修改)
深入探讨Spring Boot中的参数传递
深入探讨Spring Boot中的参数传递 在Spring Boot开发中,参数传递是一个非常常见且重要的操作。无论是处理HTTP请求,还是在方法之间传递数据,理解和掌握参数传递的各种方式都能让我们的代码更加简洁和高效。今天,我们就来深入探讨一下Spring Boot中的参数传递。 1. 基础知识: