vue如何保存后台返回的文件流

你可以使用 axios 库发送请求，然后在响应中获取文件流，使用 Blob 对象将其转换为可下载的文件。具体实现可以参考以下代码：

axios({
  url: 'your_api_url',
  method: 'GET',
  responseType: 'blob' // 告诉 axios 返回的数据类型为二进制流
}).then(response => {
  const blob = new Blob([response.data], { type: response.headers['content-type'] })
  const link = document.createElement('a')
  link.href = window.URL.createObjectURL(blob)
  link.download = 'file_name'
  link.click()
})

相关问题

vue 获取java后台返回流文件

在Vue中获取Java后台返回的流文件，你可以使用`axios`库进行HTTP请求，并使用`blob`类型来处理返回的二进制数据。以下是一个示例代码：

<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    downloadFile() {
      axios({
        url: 'your/backend/url',
        method: 'GET',
        responseType: 'blob', // 指定响应数据类型为blob
      })
        .then((response) => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'file.xlsx'); // 设置下载文件的文件名

          document.body.appendChild(link);
          link.click();
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

在上述代码中，你需要将`your/backend/url`替换为实际的后端接口URL。当点击按钮时，该方法将使用`axios`发送GET请求，并指定`responseType`为`blob`，以获取二进制数据。然后，将二进制数据转换为Blob对象，并创建一个下载链接，最后通过模拟点击链接来触发文件下载。

请注意，示例代码中使用了ES6的箭头函数和模板字符串，如果你的项目不支持ES6语法，请相应地进行修改。

希望这可以帮助到你！如果你有其他问题，请随时提问。

vue-pdf使用文件流预览

以下是使用vue-pdf插件预览文件流的示例代码：

<template>
  <div>
    <pdf :src="pdfData" :page="currentPage" :rotation="rotation"></pdf>
  </div>
</template>

<script>
import { pdf } from 'vue-pdf'

export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfData: null,
      currentPage: 1,
      rotation: 0
    }
  },
  mounted() {
    // 假设后台返回的文件流保存在变量response中
    const response = res.data

    // 将文件流解析为Blob对象
    const blob = new Blob([response], { type: 'application/pdf' })

    // 将Blob对象转换为URL
    this.pdfData = URL.createObjectURL(blob)
  },
  beforeDestroy() {
    // 销毁URL对象
    URL.revokeObjectURL(this.pdfData)
  }
}
</script>

在上述代码中，我们首先将后台返回的文件流解析为Blob对象，然后将Blob对象转换为URL。最后，将URL赋值给vue-pdf组件的src属性，即可实现文件流的预览。