项目要求：需要下载线上的文件，如果用<a href=".../1.jpg" download></a>，直接打开图片，不会将文件下载到本地，只能用以下方法解决
- download.js
/* 下载 */
export function downloadFiles(filePath, fileName) {
fetch(filePath).then(res => res.blob()).then(blob => {
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = fileName;
document.body.appendChild(a); //追加a标签
a.click(); //a标签点击
document.body.removeChild(a); //移除节点
})
}
- 在具体页面调用 下载JS
<!-- 预览文件（包括图片、文档等） -->
<template>
<div class="attPreview flexColumn">
<!-- 头部 -->
<div class="previewHeader">
<div class="flexRow">
<div class="editableBlock editName" :title="fileInfo.FIName">
<span class="content">
<span class="fileName ellipsis" style="min-width:8px;">{{ fileInfo.FIName }}</span>
</span>
</div>
<div class="flex"></div>
<a class="comm-preA InlineBlock Hand preDoc_download" title="下载" @click="clickDownload(fileInfo)">
<vab-icon icon="download-fill" />
</a>
<div class="attClose Hand" title="关闭" @click="closeAttPreview">
<vab-icon icon="close-fill" />
</div>
</div>
</div>
<!-- 内容 -->
<div class="previewPanel">
<div class="previewContainer">
<!-- 图片 -->
<div class="dragAbleContainer fileViewer imageViewer"
v-if="currentExt=='png' || currentExt=='gif' || currentExt=='bmp' || currentExt=='jpg' || currentExt=='jpeg'">
<img class="dragAbleImg noSelect grab" id="gvh_imgsrc" :src="fileInfo.FFilePath" />
</div>
<!-- 文档 -->
<div class="ifContainer"
v-else-if="currentExt=='pptx' || currentExt=='ppt' || currentExt=='pot' || currentExt=='potx' || currentExt=='pps' || currentExt=='ppsx' || currentExt=='dps' || currentExt=='dpt' || currentExt=='pptm' || currentExt=='potm' || currentExt=='ppsm' || currentExt=='xls' || currentExt=='xlt' || currentExt=='et' || currentExt=='ett' || currentExt=='xlsx' || currentExt=='xltx' || currentExt=='csv' || currentExt=='xlsb' || currentExt=='xlsm' || currentExt=='xltm' || currentExt=='doc' || currentExt=='dot' || currentExt=='wps' || currentExt=='wpt' || currentExt=='docx' || currentExt=='dotx' || currentExt=='docm' || currentExt=='dotm' || currentExt=='lrc' || currentExt=='c' || currentExt=='cpp' || currentExt=='cmd' || currentExt=='rtf' || currentExt=='txt' || currentExt=='log' || currentExt=='xml' || currentExt=='htm' || currentExt=='html' || currentExt=='pdf'">
<iframe id="preDocContent" width="100%" height="100%"
:src="fileInfo.FFilePath+'#scrollbars=0&toolbar=0&statusbar=0'" type="application/pdf"
style="border:none;"></iframe>
</div>
<!-- 视频 -->
<!-- 其它 -->
<div class="canNotView"
v-else-if="currentExt=='wmv' || currentExt=='asf' || currentExt=='asx' || currentExt=='rm' || currentExt=='rmvb' || currentExt=='mp3' || currentExt=='mp4' || currentExt=='mpg' || currentExt=='mpeg' || currentExt=='3gp' || currentExt=='mov' || currentExt=='m4v' || currentExt=='avi' || currentExt=='dat' || currentExt=='mkv' || currentExt=='flv' || currentExt=='vob'">
<attIcon :ext="currentExt"></attIcon>
<p class="fileName">{{ fileInfo.FIName }}</p>
<a class="btn btn-primary downloadBtn" @click="clickDownload(fileInfo)">下载</a>
</div>
</div>
</div>
<!-- 底部 -->
<div class="thumbnailGuide"
v-if="currentExt=='png' || currentExt=='gif' || currentExt=='bmp' || currentExt=='jpg' || currentExt=='jpeg'">
<div class="statusBar fle">
<div class="fold">
<div class="InlineBlock">
<div class="iOperate Hand">
<vab-icon icon="zoom-in-line" title="放大" @click="enlargeImg" />
<vab-icon icon="zoom-out-line" title="缩小" @click="narrowImg" />
<el-icon class="io_refresh" title="旋转" @click="rotateImg">
<refresh-left />
</el-icon>
<a class="originImage Hand noSelect" :href="fileInfo.FFilePath" target="_blank" title="查看图片">原图</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent, defineAsyncComponent, onMounted, reactive, toRefs } from 'vue'
import { getFilesInfo } from '../../../api/file.js'
import { downloadFiles } from "@/utils/download.js";
export default {
name: 'PreviewFiles',
components: {
attIcon: defineAsyncComponent(() => import('../../components/att/index.vue'))
},
props: {
id: {
type: String,
default: ''
},
ext: {
type: String,
default: ''
}
},
emits: ['close'],
setup(props, { emit }) {
//////////////////////////////////////////////////////////////////////////////////////////1、定义变量
const state = reactive({
fileInfo: [], //文件详情
currentID: props.id,
currentExt: props.ext
})
//////////////////////////////////////////////////////////////////////////////////////////2、关闭
const closeAttPreview = () => {
emit("close", 0)
}
//////////////////////////////////////////////////////////////////////////////////////////3、获取文件详情
const fetchData = async () => {
var resultData = await getFilesInfo({
'token': localStorage.getItem('access_token'),
"l_i": state.currentID,
"f_t": state.currentExt
})
if (resultData["code"] == 200) {
state.fileInfo = resultData["data"][0]
} else {
state.fileInfo = []
}
}
onMounted(() => {
fetchData()
})
//////////////////////////////////////////////////////////////////////////////////////////4、下载
const clickDownload = (fileInfo) => {
downloadFiles(fileInfo.FFilePath, fileInfo.FIName);
}
//////////////////////////////////////////////////////////////////////////////////////////5、放大图片
const enlargeImg = () => {
var oImg = document.getElementById("gvh_imgsrc");
oImg.style.width = (oImg.width * 1.2) + "px";
oImg.style.height = (oImg.height * 1.2) + "px";
}
//////////////////////////////////////////////////////////////////////////////////////////6、缩小图片
const narrowImg = () => {
var oImg = document.getElementById("gvh_imgsrc");
var widthImg = oImg.width / 1.2;
var heightImg = oImg.height / 1.2;
if (widthImg > 250) {
oImg.style.width = widthImg + "px";
oImg.style.height = heightImg + "px";
}
}
//////////////////////////////////////////////////////////////////////////////////////////7、旋转图片
var current = 0;
const rotateImg = () => {
current = (current + 90) % 360;
var oImg = document.getElementById("gvh_imgsrc");
oImg.style.transform = 'rotate(' + current + 'deg)';
}
return {
...toRefs(state),
closeAttPreview,
clickDownload,
enlargeImg,
narrowImg,
rotateImg
}
}
}
</script>
<style>
</style>
- 效果图
效果图
