Skip to content

Z
zhengyuan-danger-chemistry-manage
Commit 12b3a02a authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

修改题库的Dia内部的属性名开始之前

parent f7b9295f
Hide whitespace changes
Inline Side-by-side
Showing with 248 additions and 148 deletions
danger-manage-web/src/api/educationPlanExam/subject.js 0 → 100644
View file @ 12b3a02a
import request from '@/utils/request'
// 查询题库题目列表
export function listSubject(query) {
return request({
url: '/system/subject/list',
method: 'get',
params: query
})
}
// 查询题库题目详细
export function getSubject(subjectId) {
return request({
url: '/system/subject/' + subjectId,
method: 'get'
})
}
// 新增题库题目
export function addSubject(data) {
return request({
url: '/system/subject',
method: 'post',
data: data
})
}
// 修改题库题目
export function updateSubject(data) {
return request({
url: '/system/subject',
method: 'put',
data: data
})
}
// 删除题库题目
export function delSubject(subjectId) {
return request({
url: '/system/subject/' + subjectId,
method: 'delete'
})
}
// 导出题库题目
export function exportSubject(query) {
return request({
url: '/system/subject/export',
method: 'get',
params: query
})
}
\ No newline at end of file
danger-manage-web/src/views/educationPlanExam/lessonsProgram/components/AddQuestion.vue
View file @ 12b3a02a
...@@ -175,7 +175,17 @@ export default { ...@@ -175,7 +175,17 @@ export default {
methods: { methods: {
getQuestion() { getQuestion() {
getQuestion({ courseId: this.courseId }).then((res) => { getQuestion({ courseId: this.courseId }).then((res) => {
this.questionNextNum = res.total + 1; // 如果是修改 就是原来的值，如果不是，就是总数+1
console.log(res)
if (this.topicId) {
res.rows.forEach((item, index) => {
if (item.topicId == this.topicId) {
this.questionNextNum = index+1;
}
});
} else {
this.questionNextNum = res.total + 1;
}
}); });
}, },
getLessonById(courseId) { getLessonById(courseId) {
...@@ -249,7 +259,8 @@ export default { ...@@ -249,7 +259,8 @@ export default {
this.save(3).then((res) => { this.save(3).then((res) => {
if (res) { if (res) {
this.reset(); this.reset();
this.questionNextNum++; // this.questionNextNum++;
this.getQuestion();
} }
}); });
}, },
......
danger-manage-web/src/views/educationPlanExam/lessonsProgram/components/Dia.vue
View file @ 12b3a02a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com * @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 10:38:49 * @Date: 2022-09-22 10:38:49
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-09-28 17:48:07 * @LastEditTime: 2022-12-17 10:24:41
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/addLesson.vue * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/addLesson.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
......
danger-manage-web/src/views/educationPlanExam/questionBank/components/AddQuestion.vue
View file @ 12b3a02a
...@@ -123,6 +123,7 @@ import { ...@@ -123,6 +123,7 @@ import {
getQuestion, getQuestion,
getLessonById, getLessonById,
} from "@/api/educationPlanExam/lessonsProgram.js"; } from "@/api/educationPlanExam/lessonsProgram.js";
import { addSubject ,getSubject,listSubject,updateSubject} from "@/api/educationPlanExam/subject";
export default { export default {
name: "AnswerLesson", name: "AnswerLesson",
...@@ -156,8 +157,8 @@ export default { ...@@ -156,8 +157,8 @@ export default {
created() { created() {
// 如果存在就是修改 // 如果存在就是修改
if (this.topicId) { if (this.topicId) {
checkQuestion(this.topicId).then((res) => { getSubject(this.topicId).then((res) => {
console.log(res.data); console.log('?',res.data);
const data = res.data; const data = res.data;
this.form = { this.form = {
topicTitle: data.topicTitle, topicTitle: data.topicTitle,
...@@ -174,8 +175,18 @@ export default { ...@@ -174,8 +175,18 @@ export default {
}, },
methods: { methods: {
getQuestion() { getQuestion() {
getQuestion({ courseId: this.courseId }).then((res) => { listSubject({ bankId: this.courseId }).then((res) => {
this.questionNextNum = res.total + 1; console.log(res)
// 如果是修改 就是原来的值，如果不是，就是总数+1
if (this.topicId) {
res.rows.forEach((item, index) => {
if (item.subjectId == this.topicId) {
this.questionNextNum = index+1;
}
});
} else {
this.questionNextNum = res.total + 1;
}
}); });
}, },
getLessonById(courseId) { getLessonById(courseId) {
...@@ -187,9 +198,9 @@ export default { ...@@ -187,9 +198,9 @@ export default {
addQuestion(data) { addQuestion(data) {
// 如果是修改，就用修改的方法，如果是新增，就用新增的方法 // 如果是修改，就用修改的方法，如果是新增，就用新增的方法
if (this.topicId) { if (this.topicId) {
return changeQuestion({ topicId: this.topicId, ...data }); return updateSubject({ subjectId: this.topicId, ...data });
} else { } else {
return addQuestion({ courseId: this.courseId, ...data }); return addSubject({ bankId: this.courseId, ...data });
} }
}, },
rightAnswerClick(index) { rightAnswerClick(index) {
...@@ -249,7 +260,8 @@ export default { ...@@ -249,7 +260,8 @@ export default {
this.save(3).then((res) => { this.save(3).then((res) => {
if (res) { if (res) {
this.reset(); this.reset();
this.questionNextNum++; // this.questionNextNum++;
this.getQuestion();
} }
}); });
}, },
......
danger-manage-web/src/views/educationPlanExam/questionBank/components/Lesson.vue
View file @ 12b3a02a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com * @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 10:59:44 * @Date: 2022-09-22 10:59:44
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-16 16:43:06 * @LastEditTime: 2022-12-16 17:35:04
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/Lession.vue * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/Lession.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
...@@ -91,7 +91,7 @@ import { ...@@ -91,7 +91,7 @@ import {
updateBank, updateBank,
getBank, getBank,
} from "@/api/system/questionBank.js"; } from "@/api/educationPlanExam/questionBank";
// 所有部门 // 所有部门
import { treeselect } from "@/api/system/dept"; import { treeselect } from "@/api/system/dept";
......
danger-manage-web/src/views/educationPlanExam/questionBank/components/QuestionList.vue
View file @ 12b3a02a
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com * @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 17:56:05 * @Date: 2022-09-22 17:56:05
* @LastEditors: 纪泽龙 jizelong@qq.com * @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-16 10:23:13 * @LastEditTime: 2022-12-17 11:06:28
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/QuestionList.vue * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/QuestionList.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
<div ref="myBody" class="add-question flex"> <div ref="myBody" class="add-question flex">
<div class="text flex"> <div class="text flex">
<div class="left"> <div class="left">
目前有<span>{{ questionNum || 0}}</span 目前有<span>{{ questionNum || 0 }}</span
>道题 >道题
<!-- <span class="warn">温馨提示：发布课程前需要进行考试设置</span> --> <!-- <span class="warn">温馨提示：发布课程前需要进行考试设置</span> -->
</div> </div>
<div class="right">{{courseName}}</div> <div class="right">{{ courseName }}</div>
</div> </div>
<div class="table flex" v-loading="loading"> <div class="table flex" v-loading="loading">
<div class="th flex"> <div class="th flex">
...@@ -35,13 +35,13 @@ ...@@ -35,13 +35,13 @@
<div class="right"> <div class="right">
<div> <div>
<el-button <el-button
@click="edit(item.topicId)" @click="edit(item.subjectId)"
icon="el-icon-edit" icon="el-icon-edit"
type="text" type="text"
>修改</el-button >修改</el-button
> >
<el-button <el-button
@click="deleteLesson(item.topicId)" @click="deleteLesson(item.subjectId)"
icon="el-icon-delete" icon="el-icon-delete"
type="text" type="text"
>删除</el-button >删除</el-button
...@@ -85,6 +85,9 @@ import { ...@@ -85,6 +85,9 @@ import {
changeLesson, changeLesson,
getLessonById, getLessonById,
} from "@/api/educationPlanExam/lessonsProgram"; } from "@/api/educationPlanExam/lessonsProgram";
import { listSubject, delSubject } from "@/api/educationPlanExam/subject";
import { getBank } from "@/api/educationPlanExam/questionBank";
export default { export default {
name: "AnswerLesson", name: "AnswerLesson",
props: { props: {
...@@ -101,7 +104,7 @@ export default { ...@@ -101,7 +104,7 @@ export default {
rightNum: 0, rightNum: 0,
questionList: [], questionList: [],
loading: false, loading: false,
courseName:'', courseName: "",
}; };
}, },
// watch: { // watch: {
...@@ -117,7 +120,7 @@ export default { ...@@ -117,7 +120,7 @@ export default {
created() { created() {
console.log("this.courseId", this.courseId); console.log("this.courseId", this.courseId);
if (this.courseId) { if (this.courseId) {
this.getQuestion({ courseId: this.courseId }); this.getQuestion({ bankId: this.courseId });
// 获取只题目正确几题算过关 // 获取只题目正确几题算过关
this.getLessonById(this.courseId); this.getLessonById(this.courseId);
} }
...@@ -130,12 +133,13 @@ export default { ...@@ -130,12 +133,13 @@ export default {
this.$parent.$parent.componentsNumChange(3); this.$parent.$parent.componentsNumChange(3);
}, },
getQuestion(courseId) { getQuestion(courseId) {
return getQuestion(courseId).then((res) => { console.log(courseId);
console.log(res); return listSubject(courseId).then((res) => {
console.log("题库res", res);
this.questionList = res.rows.map((item) => { this.questionList = res.rows.map((item) => {
return { return {
topicId: item.topicId, subjectId: item.subjectId,
topicTitle: item.topicTitle, topicTitle: item.topicTitle,
}; };
}); });
...@@ -144,14 +148,14 @@ export default { ...@@ -144,14 +148,14 @@ export default {
}); });
}, },
getLessonById(courseId) { getLessonById(courseId) {
getLessonById(courseId).then((res) => { getBank(courseId).then((res) => {
console.log(res); // console.log(res);
this.rightNum = res.data.qualifiedNum; // this.rightNum = res.data.qualifiedNum;
this.courseName = res.data.courseName; this.courseName = res.data.bankName;
}); });
}, },
edit(topicId) { edit(subjectId) {
this.$emit("update:topicId", topicId); this.$emit("update:topicId", subjectId);
this.$parent.$parent.componentsNumChange(3); this.$parent.$parent.componentsNumChange(3);
}, },
deleteLesson(topicId) { deleteLesson(topicId) {
...@@ -162,7 +166,7 @@ export default { ...@@ -162,7 +166,7 @@ export default {
}) })
.then(() => { .then(() => {
this.loading = true; this.loading = true;
return deleteQuestion(topicId); return delSubject(topicId);
}) })
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
...@@ -171,7 +175,7 @@ export default { ...@@ -171,7 +175,7 @@ export default {
type: "success", type: "success",
}); });
} }
return this.getQuestion({ courseId: this.courseId }); return this.getQuestion({ bankId: this.courseId });
}) })
.finally(() => { .finally(() => {
this.loading = false; this.loading = false;
...@@ -187,16 +191,17 @@ export default { ...@@ -187,16 +191,17 @@ export default {
}); });
return; return;
} }
changeLesson({ courseId: this.courseId, qualifiedNum: this.rightNum }).then( changeLesson({
(res) => { courseId: this.courseId,
if (res.code == 200) { qualifiedNum: this.rightNum,
this.$message({ }).then((res) => {
message: "答题合格数修改成功", if (res.code == 200) {
type: "success", this.$message({
}); message: "答题合格数修改成功",
} type: "success",
});
} }
); });
}, },
}, },
}; };
......
danger-manage-web/src/views/educationPlanExam/questionBank/index.vue
View file @ 12b3a02a
...@@ -5,8 +5,9 @@ ...@@ -5,8 +5,9 @@
ref="queryForm" ref="queryForm"
:inline="true" :inline="true"
label-width="68px" label-width="68px"
> >
<el-form-item label="课件类别" prop="courseType"> <!-- <el-form-item label="课件类别" prop="courseType">
<el-select <el-select
v-model="queryParams.courseType" v-model="queryParams.courseType"
placeholder="请选择课程类型" placeholder="请选择课程类型"
...@@ -20,7 +21,22 @@ ...@@ -20,7 +21,22 @@
:value="course.planId" :value="course.planId"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item> -->
<el-form-item
label="归属部门"
prop="deptId"
ref="treeItem"
>
<Treeselect
class="tree"
v-model="queryParams.deptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择归属部门"
style="width:200px"
/>
</el-form-item>
<el-form-item label="名称" prop="courseName"> <el-form-item label="名称" prop="courseName">
<el-input <el-input
v-model="queryParams.courseName" v-model="queryParams.courseName"
...@@ -29,7 +45,7 @@ ...@@ -29,7 +45,7 @@
size="small" size="small"
/> />
</el-form-item> </el-form-item>
<el-form-item label="发布时间" prop="releaseTime"> <!-- <el-form-item label="发布时间" prop="releaseTime">
<el-date-picker <el-date-picker
v-model="queryParams.releaseTime" v-model="queryParams.releaseTime"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
...@@ -38,7 +54,7 @@ ...@@ -38,7 +54,7 @@
default-time="12:00:00" default-time="12:00:00"
> >
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item> -->
<el-form-item> <el-form-item>
<el-button <el-button
...@@ -68,7 +84,7 @@ ...@@ -68,7 +84,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-table v-loading="loading" :data="lessonsList"> <el-table v-loading="loading" :data="bankList">
<el-table-column label="题库序号" align="center" prop="bankNum" /> <el-table-column label="题库序号" align="center" prop="bankNum" />
<el-table-column label="题库名称" align="center" prop="bankName"> <el-table-column label="题库名称" align="center" prop="bankName">
</el-table-column> </el-table-column>
...@@ -84,7 +100,7 @@ ...@@ -84,7 +100,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="附件" align="center" prop="enclosure"> <!-- <el-table-column label="附件" align="center" prop="enclosure">
<template v-slot="{ row: { enclosure } }"> <template v-slot="{ row: { enclosure } }">
<a <a
v-if="enclosure && enclosure.indexOf('.txt') >= 0" v-if="enclosure && enclosure.indexOf('.txt') >= 0"
...@@ -94,7 +110,7 @@ ...@@ -94,7 +110,7 @@
> >
<a v-else :href="enclosure" class="down-load">下载附件</a> <a v-else :href="enclosure" class="down-load">下载附件</a>
</template> </template>
</el-table-column> </el-table-column> -->
<!-- <el-table-column label="视频" align="center" prop="video"> <!-- <el-table-column label="视频" align="center" prop="video">
<template v-slot="{ row: { courseName, video } }"> <template v-slot="{ row: { courseName, video } }">
<a @click="downLoadVideo(video, courseName)" class="down-load" <a @click="downLoadVideo(video, courseName)" class="down-load"
...@@ -173,26 +189,28 @@ ...@@ -173,26 +189,28 @@
</template> </template>
<script> <script>
import { // import {
getLessons, // getLessons,
getLessonById, // getLessonById,
issue, // issue,
deleteLesson, // deleteLesson,
} from "@/api/educationPlanExam/lessonsProgram.js"; // } from "@/api/educationPlanExam/lessonsProgram.js";
import { listBank,delBank } from "@/api/system/questionBank.js"; import { listBank,delBank } from "@/api/educationPlanExam/questionBank";
// 部门列表 // 部门列表
import { treeselect } from "@/api/system/dept"; import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
// 获取课程类型 // 获取课程类型
import { getPlanList } from "@/api/educationPlanExam/trainingProgram"; // import { getPlanList } from "@/api/educationPlanExam/trainingProgram";
import { mapGetters, mapMutations } from "vuex"; // import { mapGetters, mapMutations } from "vuex";
import Dia from "./components/Dia"; import Dia from "./components/Dia";
export default { export default {
name: "", name: "questionBank",
components: { components: {
Dia, Dia,
Treeselect
}, },
data() { data() {
return { return {
...@@ -201,13 +219,15 @@ export default { ...@@ -201,13 +219,15 @@ export default {
// 总条数 // 总条数
total: 0, total: 0,
// courseOptions: [], // courseOptions: [],
lessonsList: [], bankList: [],
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
courseType: null, // 所属部门
courseName: null, deptId: null,
// 题库名称
bankName: null,
releaseTime: "", releaseTime: "",
}, },
// 表单参数 // 表单参数
...@@ -226,16 +246,16 @@ export default { ...@@ -226,16 +246,16 @@ export default {
}; };
}, },
computed: { computed: {
...mapGetters(["courseOptions"]), // ...mapGetters(["courseOptions"]),
}, },
created() { created() {
this.getPlanList(); // this.getPlanList();
this.getTreeselect(); this.getTreeselect();
this.getList(); this.getList();
}, },
methods: { methods: {
...mapMutations({ setOptions: "SET_COURSE_OPTIONS" }), // ...mapMutations({ setOptions: "SET_COURSE_OPTIONS" }),
/** 查询部门下拉树结构 */ /** 查询部门下拉树结构 */
getTreeselect() { getTreeselect() {
treeselect().then((response) => { treeselect().then((response) => {
...@@ -261,18 +281,18 @@ export default { ...@@ -261,18 +281,18 @@ export default {
} }
}, },
// 获取课程类别，也就是计划名称 // 获取课程类别，也就是计划名称
getPlanList() { // getPlanList() {
getPlanList().then((res) => { // getPlanList().then((res) => {
const courseOptions = res.data.map((item) => { // const courseOptions = res.data.map((item) => {
return { // return {
planId: item.planId, // planId: item.planId,
planName: item.planName, // planName: item.planName,
}; // };
}); // });
// this.$store.commit("SET_COURSE_OPTIONS"); // // this.$store.commit("SET_COURSE_OPTIONS");
this.setOptions(courseOptions); // this.setOptions(courseOptions);
}); // });
}, // },
/** 查询课程列表 */ /** 查询课程列表 */
getList() { getList() {
...@@ -280,7 +300,7 @@ export default { ...@@ -280,7 +300,7 @@ export default {
listBank(this.queryParams) listBank(this.queryParams)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
this.lessonsList = res.rows.map((item, index) => { this.bankList = res.rows.map((item, index) => {
return { return {
bankNum: bankNum:
index + index +
...@@ -400,79 +420,79 @@ export default { ...@@ -400,79 +420,79 @@ export default {
if (!cellValue) return "-"; if (!cellValue) return "-";
else return cellValue; else return cellValue;
}, },
downloadText(url) { // downloadText(url) {
// url = url.replace(/\\/g, "/"); // // url = url.replace(/\\/g, "/");
const xhr = new XMLHttpRequest(); // const xhr = new XMLHttpRequest();
xhr.open("GET", url, true); // xhr.open("GET", url, true);
xhr.responseType = "blob"; // xhr.responseType = "blob";
//xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA=='); // //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');
xhr.onload = function () { // xhr.onload = function () {
if (xhr.readyState === 4 && xhr.status === 200) { // if (xhr.readyState === 4 && xhr.status === 200) {
let blob = this.response; // let blob = this.response;
console.log(blob); // console.log(blob);
// 转换一个blob链接 // // 转换一个blob链接
// 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)， // // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
// 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定 // // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
let downLoadUrl = window.URL.createObjectURL( // let downLoadUrl = window.URL.createObjectURL(
new Blob([blob], { // new Blob([blob], {
type: "txt", // type: "txt",
}) // })
); // );
// 视频的type是video/mp4，图片是image/jpeg // // 视频的type是video/mp4，图片是image/jpeg
// 01.创建a标签 // // 01.创建a标签
let a = document.createElement("a"); // let a = document.createElement("a");
// 02.给a标签的属性download设定名称 // // 02.给a标签的属性download设定名称
a.download = name; // a.download = name;
// 03.设置下载的文件名 // // 03.设置下载的文件名
a.href = downLoadUrl; // a.href = downLoadUrl;
// 04.对a标签做一个隐藏处理 // // 04.对a标签做一个隐藏处理
a.style.display = "none"; // a.style.display = "none";
// 05.向文档中添加a标签 // // 05.向文档中添加a标签
document.body.appendChild(a); // document.body.appendChild(a);
// 06.启动点击事件 // // 06.启动点击事件
a.click(); // a.click();
// 07.下载完毕删除此标签 // // 07.下载完毕删除此标签
a.remove(); // a.remove();
} // }
}; // };
xhr.send(); // xhr.send();
}, // },
downLoadVideo(url, name) { // downLoadVideo(url, name) {
var xhr = new XMLHttpRequest(); // var xhr = new XMLHttpRequest();
xhr.open("GET", url, true); // xhr.open("GET", url, true);
xhr.responseType = "arraybuffer"; // 返回类型blob // xhr.responseType = "arraybuffer"; // 返回类型blob
xhr.onload = function () { // xhr.onload = function () {
if (xhr.readyState === 4 && xhr.status === 200) { // if (xhr.readyState === 4 && xhr.status === 200) {
let blob = this.response; // let blob = this.response;
console.log(blob); // console.log(blob);
// 转换一个blob链接 // // 转换一个blob链接
// 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)， // // 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
// 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定 // // 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
let downLoadUrl = window.URL.createObjectURL( // let downLoadUrl = window.URL.createObjectURL(
new Blob([blob], { // new Blob([blob], {
type: "video/mp4", // type: "video/mp4",
}) // })
); // );
// 视频的type是video/mp4，图片是image/jpeg // // 视频的type是video/mp4，图片是image/jpeg
// 01.创建a标签 // // 01.创建a标签
let a = document.createElement("a"); // let a = document.createElement("a");
// 02.给a标签的属性download设定名称 // // 02.给a标签的属性download设定名称
a.download = name; // a.download = name;
// 03.设置下载的文件名 // // 03.设置下载的文件名
a.href = downLoadUrl; // a.href = downLoadUrl;
// 04.对a标签做一个隐藏处理 // // 04.对a标签做一个隐藏处理
a.style.display = "none"; // a.style.display = "none";
// 05.向文档中添加a标签 // // 05.向文档中添加a标签
document.body.appendChild(a); // document.body.appendChild(a);
// 06.启动点击事件 // // 06.启动点击事件
a.click(); // a.click();
// 07.下载完毕删除此标签 // // 07.下载完毕删除此标签
a.remove(); // a.remove();
} // }
}; // };
xhr.send(); // xhr.send();
}, // },
}, },
}; };
</script> </script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment