spring boot axios导出后缀是doc，docx文件

拼搏现实的明天。 2021-09-23 09:22 243阅读 0赞

# 前端html文件 #

## html文件 ##

<template>
        <div>
            <el-button type="primary" @click="doc03">doc</el-button>
            <el-button type="primary" @click="doc07">docx</el-button>
        </div>
    </template>
    
    <script>
        import pageApi from '../../../../Api'
        export default {
            name: "filedown",
            methods:{
                   
                doc07(){
                    pageApi.doc07().then(res => { //res为axios请求返回的未被本地代码处理过的对象
                        debugger
                        const url = window.URL.createObjectURL(new Blob([res.data]))
                        const link = document.createElement('a')
                        link.href = url
                        link.setAttribute('download', `1.docx`)
                        document.body.appendChild(link)
                        link.click()
                    })
    
                },
                doc03(){
                    pageApi.doc03().then(res => { //res为axios请求返回的未被本地代码处理过的对象
                        debugger
                        const url = window.URL.createObjectURL(new Blob([res.data]))
                        const link = document.createElement('a')
                        link.href = url
                        link.setAttribute('download', `1.doc`)
                        document.body.appendChild(link)
                        link.click()
                    })
    
                }
            }
        }
    </script>
    
    <style scoped>
    </style>

## api 文件 ##

api文件里面的重点是要设置responseType，设置的方式为：  
let myAxios = axios.create(\{  
responseType: ‘arraybuffer’  
\})

doc07(){
        return new Promise(function (resolve, reject) {
          let myAxios = axios.create({
            responseType: 'arraybuffer'
    
          })
          myAxios.post('/DownloadController/doc07', {})
              .then((res) => {
                resolve(res)
              })
              .catch((error) => {
                reject(error)
              })
        })
      },
      doc03(){
        return new Promise(function (resolve, reject) {
          let myAxios = axios.create({
            responseType: 'arraybuffer'
    
          })
          myAxios.post('/DownloadController/doc03', {})
              .then((res) => {
                resolve(res)
              })
              .catch((error) => {
                reject(error)
              })
        })
      }

# 后端方法 #

下面只截取了方法，具体类随便创建，不影响。

@CrossOrigin(origins = "http://localhost:8080")
        @RequestMapping(value = "/doc07", method = { RequestMethod.POST,RequestMethod.GET}) // postman,url,3.tbox请求下载文件,暂时只支持单文件下载。
        public void getdocl07(HttpServletRequest request, HttpServletResponse response){
            String fileName ="1.docx";
            InputStream inputStream = null;
            ServletOutputStream servletOutputStream = null;
            try {
                String path = "source" + File.separator + fileName;
                org.springframework.core.io.Resource resource = resourceLoader.getResource("classpath:"+path);
                response.setContentType("application/octet-stream");
                response.addHeader("Cache-Control", "no-cache, no-store, must-revalidate");
                response.addHeader("Pragma", "no-cache");
    
                inputStream = resource.getInputStream();
                servletOutputStream = response.getOutputStream();
                IOUtils.copy(inputStream, servletOutputStream);
                response.flushBuffer();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if (servletOutputStream != null) {
                        servletOutputStream.close();
                    }
                    if (inputStream != null) {
                        inputStream.close();
                    }
                    System.gc();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    
        @CrossOrigin(origins = "http://localhost:8080")
        @RequestMapping(value = "/doc03", method = { RequestMethod.POST,RequestMethod.GET}) // postman,url,3.tbox请求下载文件,暂时只支持单文件下载。
        public void getdocl03(HttpServletRequest request, HttpServletResponse response){
            String fileName ="1.doc";
            InputStream inputStream = null;
            ServletOutputStream servletOutputStream = null;
            try {
                String path = "source" + File.separator + fileName;
                org.springframework.core.io.Resource resource = resourceLoader.getResource("classpath:"+path);
                response.setContentType("application/octet-stream");
                response.addHeader("Cache-Control", "no-cache, no-store, must-revalidate");
                response.addHeader("Pragma", "no-cache");
    
                inputStream = resource.getInputStream();
                servletOutputStream = response.getOutputStream();
                IOUtils.copy(inputStream, servletOutputStream);
                response.flushBuffer();
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if (servletOutputStream != null) {
                        servletOutputStream.close();
                    }
                    if (inputStream != null) {
                        inputStream.close();
                    }
                    System.gc();
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }

# 运行结果 #

doc文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]  
docx文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 1]  
想看具具体设置请看上一篇文章：[导出csv，xls，xlsx][csv_xls_xlsx]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70]: /images/20210923/5d42e267d4c34c95975abbfcceb49f22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5NzY4Nzk_size_16_color_FFFFFF_t_70 1]: /images/20210923/2b7046232fdf4d8f8001b210b482b7ee.png
[csv_xls_xlsx]: https://blog.csdn.net/u012976879/article/details/102589256