文件的下载、预览

最新推荐文章于 2025-03-10 12:44:01 发布

zcm629

最新推荐文章于 2025-03-10 12:44:01 发布

阅读量3.1k

点赞数

分类专栏：项目知识点积累

本文链接：https://blog.youkuaiyun.com/weixin_43182021/article/details/86523424

版权

项目知识点积累专栏收录该内容

3 篇文章

订阅专栏

本文探讨了项目中文件下载的两种常见方法，包括后台生成文件地址供前端下载及直接返回文件数据流的方式，并提及文件预览的技术，如Xdoc的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中，我们经常遇到对文件的下载、预览功能。首先我们先说一下下载

一、文件的下载

1、后台根据数据生成word文件，存放到服务器，然后通过接口给前台返回地址，前台进行下载。该方法不足点就是，生成的文件会占据硬盘内存。

window.location = commonUrl + '/template/exportEvent?eventId=' + id + ''

2、后台给前台返回文件数据流，前端进行转换文件下载。

download(data, fileTitle) {
    // fileTitle 文件名称
    if (!data) {
        return
    }
    const content = data
    const blob = new Blob([content])
    const fileName = fileTitle
    if ('download' in document.createElement('a')) { // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName + '.doc'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob, { type: 'application/msword' })
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
    } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName + '.doc')
    }
}

二、文件的预览

Xdoc实现文件预览

<div class="dialoge_container">
    <div class="content">
        <div class="close">
            <i></i>
        </div>
        <div class="main junScrollBar_hide">
            <iframe frameborder='0' src="./model.html" name="iframe_a" style="width: 100%;height: 100%;overflow: auto" class="junScrollBar_hide"></iframe>
        </div>
    </div>
</div>

$('.dialoge_container').show();
XDoc.run(文件的base64格式, "pdf", {}, "iframe_a");

//截取文件名后缀
var uploadType = ele.name.substring(ele.name.lastIndexOf('.') + 1)
var baseUrl = ''
// ele.base64 后台返回的base64
if (ele.fileType == 'excel' || ele.fileType == 'word' || ele.fileType == 'ppt' || ele.fileType == 'pdf') {
    baseUrl = 'data:application/' + uploadType + ';base64,' + ele.base64
} else {
    baseUrl = 'data:image/' + uploadType + ';base64,' + ele.base64
}