Vue：如何使用下載標簽將文件下載到瀏覽器

Question

我正在使用 axios 並想下載 PDF 和圖像文件。

我可以同時下載並打開圖像，但是，當我嘗試打開 PDF 文件時，它無法打開。

downloadItem({ url, name }) {
      axios
        .get(url, { responseType: 'blob' })
        .then((response) => {
          const blob = new Blob([response.data], { type: response.data.type });
          const link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          link.download = name;
          link.click();
          URL.revokeObjectURL(link.href);
        })
        .catch(console.error);
    },

有誰能夠幫我？ 對不起我的英語不好。

Answer 1

這對你有用嗎？

axios
.get(url, {
  headers: {
    'Accept': 'application/pdf'
  },
  responseType: 'blob' })
.then(function (response) {
  switch ([WHAT IS YOUR TYPE]) {
    case "image": {
      const blob = new Blob([response.data], { type: response.data.type });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = name;
      link.click();
      URL.revokeObjectURL(link.href);
      break
    }
    case "pdf": {
      const blob = new Blob([response.data], { type: 'application/pdf' })
      const objectUrl = window.URL.createObjectURL(blob)
      window.open(objectUrl)
      elt.impressionEnCours = false
      break
    }
  }
})
.catch(function (error) {
  console.log(JSON.stringify(error))
})