整段 html实现其中的每一个 a 标签跨域下载操作 window.URL.createObjectURL(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
}