pdf文件预览和导出

抢先观看：

• window.URL.createObjectURL()：

用于根据传入的 Blob 对象或 File 对象生成一个临时的、可访问的 URL,仅在浏览器会话中有效，并且不会上传到服务器。

const url = window.URL.createObjectURL(blob);

• Blob 对象：

是 Web 开发中用来表示二进制数据的大型对象，它可以是不可变的类文件对象，用于存储和处理大量的二进制数据，如文本文件、图像、音频等。

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

• Blob特点：

①不可变：Blob 对象一旦创建，就无法修改内容，它是只读的。

②类文件对象：它允许在不访问文件系统的情况下处理数据，如读取或操作二进制文件（如图片和视频等）。

③支持切片：Blob 支持通过 slice() 方法进行切片，创建一个新的 Blob，从而提取其中的部分数据。

• Blob 的类型：

type 参数用于指定数据的 MIME 类型

MIME类型是一种互联网标准，用于表示文件的类型和格式。它帮助浏览器和服务器了解文件内容的性质，并选择合适的方式来处理或呈现它。

MIME 类型组成：主类型和子类型，用斜杠（/）分隔，例如 text/html、image/png。

MIME类型使用场景：web浏览器（Content-Type，可以确认 MIME 类型）、文件上传、API响应、邮件响应。

MIME常见类型以及对应格式：

1. 文本类型

• text/plain：普通文本文件，例如 .txt
• text/html：HTML 文档，例如 .html
• text/css：CSS 样式表，例如 .css
• text/javascript：JavaScript 脚本，例如 .js

2. 图像类型

• image/jpeg：JPEG 图像，例如 .jpg, .jpeg
• image/png：PNG 图像，例如 .png
• image/gif：GIF 图像，例如 .gif
• image/svg+xml：SVG 矢量图形，例如 .svg

3. 音频类型

• audio/mpeg：MP3 音频，例如 .mp3
• audio/ogg：Ogg Vorbis 音频，例如 .ogg
• audio/wav：WAV 音频，例如 .wav

4. 视频类型

• video/mp4：MP4 视频，例如 .mp4
• video/webm：WebM 视频，例如 .webm
• video/ogg：Ogg Theora 视频，例如 .ogv

5. 应用类型

• application/json：JSON 数据，例如 .json
• application/xml：XML 文档，例如 .xml
• application/pdf：PDF 文件，例如 .pdf
• application/zip：ZIP 压缩包，例如 .zip
• application/vnd.ms-excel：Excel 文件，例如 .xls
• application/vnd.openxmlformats-officedocument.spreadsheetml.sheet：Excel 2007+ 文件，例如 .xlsx
• application/vnd.google-earth.kml+xml：KML 文件，例如 .kml
• application/octet-stream：任意的二进制数据，常用于下载文件

实现：

• 后端接口请求并返回文件流数据：

import http from "@/api/index";
export async function ReportApi (params) {
  try {
    const res = await http({
      url: "/api-flight/uavFlyData/history/report",
      method: "POST",
      data: params,
      headers: {
        "Content-Type": "application/json;charset=UTF-8",
      },
      responseType: 'blob'
    });
    console.log(res, 'res');
    return res;
  } catch (error) {
    console.log(error, 'error');
    return error;
  }
}

• 在点击事件上，预览和导出方法：

//将点击事件绑定到预览或者导出按钮
const reportCilck=()=>{
try {
    let params = {
     ...//传入所需的参数
    }
    const res = await ReportApi(JSON.stringify(params))
    if (res && res.status === 200) {
//创建 Blob 对象
      pdfUrl.value = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }));
      const fname = '文件导出.pdf';
//创建一个 <a> 元素用于触发下载
      const link = document.createElement('a');
//设置连接属性
      link.href = pdfUrl.value;
      link.setAttribute('download', fname);
//触发下载并清理
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(pdfUrl.value);
      ElMessage.success('文件下载成功');
    }
  } catch (err) {
    ElMessage.error('文件下载失败');
  }
}