Vue + Laravel：如何正确下载PDF文件？

php javascript vue.js pdf laravel

2022-08-30 16:30:28

情况：

前端：Vue。后端：拉拉维尔。

在Web应用程序中，我需要让用户下载某些pdf文件：

我需要Laravel获取该文件并将其作为API GET请求的响应返回。
然后在我的 Vue Web 应用程序中，我需要获取文件并下载它。

代码：

应用程序接口：

$file = public_path() . "/path/test.pdf";

$headers = [
    'Content-Type' => 'application/pdf',
];
return response()->download($file, 'test.pdf', $headers);

网络应用：

downloadFile() {
  this.$http.get(this.apiPath + '/download_pdf')
    .then(response => {
      let blob = new Blob([response.data], { type: 'application/pdf' })
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = 'test.pdf'
      link.click()
    })
}

结果：

使用此代码，我确实设法下载了一个pdf文件。问题是pdf是空白的。

不知何故，数据被损坏了（不是这个特定的pdf文件的问题，我已经尝试了几个pdf文件 - 相同的结果）

来自服务器的响应：

来自服务器的响应本身很好：

下载内容：

问题可能出在 pdf 文件上。它绝对看起来像损坏的数据。这是它如何看起来像的摘录：response.data

问题：

如何使用 Laravel 作为 API 和 Vue 为 Web 应用正确下载 pdf 文件？

谢谢！

答案 1

溶液：

上面的代码是正确的。缺少的是将适当的添加为 .responseTypearraybuffer

我被回应中的人吓坏了，这误导了我。这些问号是可以的，因为pdf是一个二进制数据，应该由适当的读者阅读。????

阵列缓冲器：

数组缓冲区精确地用于保存二进制数据。

这是 mozilla 网站上的定义：

ArrayBuffer 对象用于表示一个通用的、固定长度的原始二进制数据缓冲区。您不能直接操作数组缓冲区的内容;相反，您可以创建一个类型化数组对象或一个以特定格式表示缓冲区的 DataView 对象，并使用它来读取和写入缓冲区的内容。

该字符串指示响应的类型。通过告诉它一个数组缓冲区，然后它相应地处理数据。ResponseType

只需添加响应类型，我就设法正确下载了pdf文件。

代码：

这是经过纠正的 Vue 代码（与以前完全相同，但添加了 responseType）：

downloadFile() {
  this.$http.get(this.appApiPath + '/testpdf', {responseType: 'arraybuffer'})
    .then(response => {
      let blob = new Blob([response.data], { type: 'application/pdf' })
      let link = document.createElement('a')
      link.href = window.URL.createObjectURL(blob)
      link.download = 'test.pdf'
      link.click()
    })
}

编辑：

这是一个更完整的解决方案，考虑了其他浏览器的行为：

downloadContract(booking) {
  this.$http.get(this.appApiPath + '/download_contract/' + booking.id, {responseType: 'arraybuffer'})
    .then(response => {
      this.downloadFile(response, 'customFilename')
    }, response => {
      console.warn('error from download_contract')
      console.log(response)
      // Manage errors
      }
    })
},

downloadFile(response, filename) {
  // It is necessary to create a new blob object with mime-type explicitly set
  // otherwise only Chrome works like it should
  var newBlob = new Blob([response.body], {type: 'application/pdf'})

  // IE doesn't allow using a blob object directly as link href
  // instead it is necessary to use msSaveOrOpenBlob
  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(newBlob)
    return
  }

  // For other browsers:
  // Create a link pointing to the ObjectURL containing the blob.
  const data = window.URL.createObjectURL(newBlob)
  var link = document.createElement('a')
  link.href = data
  link.download = filename + '.pdf'
  link.click()
  setTimeout(function () {
    // For Firefox it is necessary to delay revoking the ObjectURL
    window.URL.revokeObjectURL(data)
  }, 100)
},

答案 2

您将无法从进行下载，因为两者都在我假设的不同端口上运行。LaravelVue

即使你尝试这样的事情。

public function getDownload()
    {
        //PDF file is stored under project/public/download/info.pdf
        $file= public_path(). "/download/info.pdf";

        $headers = [
              'Content-Type' => 'application/pdf',
           ];

    return response()->download($file, 'filename.pdf', $headers);
    }

当您使用库尝试将标头发送到端口并尝试在库上发送pdf内容时，这将无济于事LaravelVue js

试试这个从这里获取帮助