学习关键语句:
后端返回的数据地址是虚拟地址 , 网页打不开 , 不能直接放在 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>
结束
好了 , 这样就可以用虚拟地址播放视频 , 和下载虚拟地址的 PDF 文件了