后端返回文件内容，前端vue3下载

可以通过axios库发送GET请求获取后端返回的文件内容，然后使用Blob对象创建一个二进制文件，再将其转换为URL，最后使用a标签的download属性实现文件下载。

以下是示例代码：

// 发送GET请求获取文件内容
axios.get('/api/download').then(response => {
  const blob = new Blob([response.data], { type: response.headers['content-type'] })
  const url = window.URL.createObjectURL(blob)
  // 创建a标签进行下载
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.setAttribute('download', 'file.pdf')
  document.body.appendChild(link)
  link.click()
  // 释放URL对象
  window.URL.revokeObjectURL(url)
})

其中，'/api/download'是后端接口地址，'file.pdf'是下载的文件名，可以根据实际情况进行修改。

相关问题

后端返回pdf文件流vue前端实现预览

可以在前端使用`pdf.js`库来实现预览PDF文件，具体步骤如下：

1. 安装`pdf.js`库

npm install pdfjs-dist --save

2. 在Vue组件中引入`pdf.js`

import pdfjsLib from 'pdfjs-dist'

3. 创建一个canvas元素用于渲染PDF文件

<canvas ref="pdfViewer"></canvas>

4. 加载PDF文件流并渲染到canvas上

loadPdf(pdfStream) {
  let pdfViewer = this.$refs.pdfViewer
  pdfjsLib.disableWorker = true
  pdfjsLib.getDocument({ data: pdfStream }).promise.then(pdf => {
    pdf.getPage(1).then(page => {
      let viewport = page.getViewport({ scale: 1 })
      let canvas = pdfViewer
      let context = canvas.getContext('2d')
      canvas.height = viewport.height
      canvas.width = viewport.width
      page.render({ canvasContext: context, viewport })
    })
  })
}

其中，`pdfStream`为后端返回的PDF文件流，`pdfjsLib.disableWorker`是为了避免在非Web Worker环境中使用Worker的警告，`pdfjsLib.getDocument`方法用于加载PDF文件，`pdf.getPage`方法用于获取PDF文件的第一页，`page.getViewport`方法用于获取页面的视图大小，最后使用`page.render`方法将页面渲染到canvas上。

5. 调用loadPdf方法加载PDF文件流

this.loadPdf(pdfStream)

这样就可以在Vue前端实现预览PDF文件了。

vue3 后端返回pdf文件流前端预览

在Vue 3中，可以通过以下步骤实现后端返回的PDF文件流在前端进行预览：

1. 创建一个用于显示PDF的组件。可以使用现成的第三方库，例如`vue2-pdf-viewer`或者`vue-pdf`，也可以自己实现一个简单的组件。

2. 在Vue组件中引入后端返回的PDF文件流。通常情况下，可以通过发送HTTP请求到后端来获取PDF文件流数据。

3. 在发送HTTP请求时，确保设置正确的response类型为`arraybuffer`，以确保能够正确处理二进制数据。

4. 使用JavaScript中的Blob对象创建一个URL，将PDF文件流转换为URL地址。

5. 将转换后的URL地址传递给PDF预览组件来展示PDF内容。

以下是一个简单的示例代码：

<template>
  <div>
    <pdf-viewer :src="pdfUrl"></pdf-viewer>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pdfUrl: null
    };
  },
  mounted() {
    axios.get('your-backend-api-url', {
      responseType: 'arraybuffer'
    }).then(response => {
      const blob = new Blob([response.data], { type: 'application/pdf' });
      this.pdfUrl = URL.createObjectURL(blob);
    });
  }
};
</script>

在上述示例中，通过发送GET请求到指定的后端API获取PDF文件流数据。然后，使用`Blob`对象创建URL地址，并将其赋值给组件中的`pdfUrl`变量。最后，将该变量传递给PDF预览组件进行渲染，从而实现PDF文件流在前端的预览。