以vue3作为示例

<template>

    <div>

      <button @click="downloadPDF">下载 PDF</button>

    </div>

  </template>

  <script setup lang="ts">

  const downloadPDF = () => {

    // 创建一个 XMLHttpRequest 对象

    const xhr = new XMLHttpRequest();

    // 设置请求的 URL

    xhr.open('GET', ' *****请求地址****** ');

    // 设置响应类型为二进制数据

    xhr.responseType = 'blob';

    // 当请求完成时执行的回调函数

    xhr.onload = () => {

      // 创建一个隐藏的 <a> 标签

      const link = document.createElement('a');

      link.style.display = 'none';

      // 创建一个 Blob 对象,用于存储响应数据

      const blob = new Blob([xhr.response], { type: 'application/pdf' });

      // 设置下载链接

      link.href = URL.createObjectURL(blob);

      // 设置下载文件的名称(可选)

      link.download = 'filename.pdf';

      // 将 <a> 标签添加到页面中

      document.body.appendChild(link);

      // 触发点击事件进行下载

      link.click();

      // 移除 <a> 标签

      document.body.removeChild(link);

    };

    // 发送请求

    xhr.send();

  };

  </script>

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐