虚拟地址的文件中 , 视频如何在网页播放 , PDF如何进行下载

本文链接：https://blog.csdn.net/shaoyahu/article/details/128918244

学习关键语句:
后端返回的数据地址是虚拟地址 , 网页打不开 , 不能直接放在 video 等标签中
虚拟地址的视频播放
虚拟地址的文件下载

写在前面

遇到了什么业务呢

后端返回的文件中 , 视频和PDF文件都是虚拟地址 , 直接打开根本打不开

其中PDF文件的页面查看是通过 PDF.js 库实现的 , 点击查看

现在呢 , 记录一下如何播放视频和下载PDF文档

特别提醒 : 请不要盲目复制使用发现不行就放弃 , 由于后端的不同 , 我们的数据结构可能不完全一样 , 比如我的是 data.data 你的就只是 data.data.data 都有可能

开始

播放视频

主要还是使用这个 video 标签 , 也不用其他的什么库了

主要思路就是以下

获取视频的虚拟路径文章中我就用 http://xxx/id=xxxx 来指代视频的虚拟路径
使用 axios 发起请求获取到后端传回来的 blob 型数据
使用 URL 的 createObjectURL 方法创建本地的地址进行播放

由于一般请求中需要携带 token , 所以封装一个获取 token 的方法用来获取 token , 这个大家自己搞一下吧
在请求文件中 , 暂时命名为 getData.js

getData.js

import axios from 'axios'
// 获取 token 的方法由大家自己解决
import { getToken } from "@/composables/auth"

// 获取视频
export function getVideoPlay(src) {
    return axios({
        method: 'get',
        url: `${src}`,
        // `responseType` 表示服务器响应的数据类型 , 我们选择二进制数据
        responseType: 'blob',
        headers: {
        	// 如果请求需要携带 token 则在请求头中加上
            authorization: getToken()
        }
    })
}

在 .vue 文件中获取我们的视频

video.vue

<template>
	<video :src="src" controls></video>
</template>

<script setup>
import { ref } from 'vue'
import { getVideoPlay } from './api.js'

let src = ref('')
function getVideo(vSrc) {
    getVideoPlay(vSrc)
        .then((res) => {
            src.value = URL.createObjectURL(res.data)
        })
}

// 发起请求虚拟路径的地址
getVideo('http://xxx/id=xxxx')

</script>

这样一来 , 视频就能在我们的页面上进行播放了

这个问题给我很大困扰 , 主要是因为不知道搜什么关键词可以得到答案 , 直到我翻了下 b 站的视频路径 , 我才搜索到了这个方法

我们在检查元素中可以看到我们的路径是这样的

在这里插入图片描述

下载 PDF 文件

那么怎么下载虚拟地址的 PDF 文件呢
一般用作权限控制的来由 , 当然了如果使用了 PDF.js 库的话已经是自带了一个下载开关了

现在是做直接的下载虚拟地址 PDF 文件

我们的思路如下

得到的是文件的虚拟路径 , 直接打开是打不开的 , 我这里以 http://xxx/id=xxxx 来演示
使用 axios 发起请求获取到后端传回来的 blob 型数据
创建一个 a 标签用来下载
使用 URL 的 createObjectURL 方法创建本地的地址给创建的 a 标签

请求文件中 , 暂时命名为 getData.js

getData.js

import axios from 'axios'
// 获取 token 的方法由大家自己解决
import { getToken } from "@/composables/auth"

// 下载档案
export function updateFile(src) {
    return axios({
        method: 'get',
        url: `${src}`,
        responseType: 'blob',
        headers: {
            "Content-Type": "application/json;charset=utf-8",
            authorization: 'Bearer ' + getToken()
        }
    })
}

// 导出 PDF 文件 需要的是参数第一个是 二进制数据流 , 第二个是想要下载的文件的起名
export function exportPdf(data, fileName) {
  let blob = new Blob([data], {
    // type类型后端返回来的数据中会有，根据自己实际进行修改
    // PDF下载为 application/pdf , 表格下载为 application/xlsx , 压缩包为 application/zip 等
    type: "application/pdf"
  })
  let filename = fileName
  if (typeof window.navigator.msSaveBlob !== "undefined") {
    window.navigator.msSaveBlob(blob, filename)
  } else {
    var blobURL = window.URL.createObjectURL(blob)
    // 创建隐藏<a>标签进行下载
    var tempLink = document.createElement("a")
    tempLink.style.display = "none"
    tempLink.href = blobURL
    tempLink.setAttribute("download", filename)
    if (typeof tempLink.download === "undefined") {
      tempLink.setAttribute("target", "_blank")
    }
    document.body.appendChild(tempLink)
    tempLink.click()
    document.body.removeChild(tempLink)
    window.URL.revokeObjectURL(blobURL)
  }
}

在 .vue 文件中下载我们的 PDF 文件

getPDF.vue

<template>
	<button @click='upload'>下载 PDF 文件</button>
</template>

<script setup>
import { updateFile, exportPdf } from './api.js'

function upload() {
    updateFile('http://xxx/id=xxxx')
        .then((res) => {
        	// 下载文件 , 起名为 去看邵雅虎的博客.pdf
            exportPdf(res.data, '去看邵雅虎的博客.pdf')
        })
}
</script>