前端,下载doc文件代码功能

一般我们都习惯用vue写项目,所以我在method里体现代码内容

在html中书写按钮,

在js中,首先获取到后端传过来的内容url,然后用replace方法替换,并找到完整地址

然后用request工具改为 responseType:"Blob" 类型

之后获取windon中的url,然后创建临时标签a,CreatElement(a)

成功后可以给fileName命名格式

然后设置一个方法cilick()

在给点击成功后在缓存区释放出来url即可

<Button click='donwloadContract'></Button>

<script>

import request from '@/utils/request'


methods:{

    //下载合同
    async downloadContract(id){

        let res = await downloanContract(id)
        //获取到接口成功
        if(res.data.code ==== 20000){
           
            //文件名命名,docx后缀名
            let  fileName = '贷款'+id + '.docx'

            let url = res.data.data.url.replace("/api"," ")
            let resBlob = await request({
            //后端传过来地址   
            url,
            responseType:"Blob"
            
            })
        }
        //内存中临时存储
        let link = Windown.Url.createObjectURL(resBlob.data)
        
        //创建a标签
        let tagA= document.createElement('a')
        tagA.href = link
        tagA.donwload= fileName

        //隐藏a标签
        tagA.style.display = none
        //在body中添加a标签
        document.body.appendChild(tagA)

        //点击a标签
        tagA.click()

        //释放资源与url

        document.body.removeChild(tagA)
        documnet.URL.revokeObjectURL(url)

     }
}

</script>