下载带有服务器节点和 vue.js 的 pdf

Question

我有问题。我必须创建一个链接来下载带有服务器的 pdf，但是当点击链接时，文件没有被下载。

重要的是不要在客户端公开 PDF 链接，而是从服务器下载文件。

请帮帮我！

在前面，我拍了

    <div class="historyNavBtns">
      <a
        v-if="isLoggedIn"
        href="/tutorial"
        @click="goLinkTutorial"
      >
        <fa-icon
          class="btn bg-blue"
          icon="info-circle"
        />
      </a>

我调用api的方法

  methods: {
    async goLinkTutorial () {
      try {
        await api.getLinkTutorial()
      } catch (error) {
        this.$store.dispatch('setMessage', { type: 'error', message: error, timeout: 2000 })
      }
    },
  },

}

在 api.js 中

export async function getLinkTutorial () {
  console.log('test')
  const response = await apiClient.get('/tutorial')
  return response.data
}

在路线中

router.get('/', getTutorial)

在控制器中

import { techLogger } from '../util/logger.js'

export const getTutorial = (req, res) => {
  try {
    res.type('application/pdf').download(new URL('../upload-folder/tutorial.pdf', import.meta.url).pathname, 'tutorial.pdf')
  } catch (error) {
    techLogger.info(error)
  }
}

Answer 1

您应该创建一个指向它的链接并单击它，而不是通过 axios（或 apiClient）获取下载的文档：

    <div class="historyNavBtns">
      <a
        v-if="isLoggedIn"
        href="/tutorial"
        download="tutorial.pdf"
      >
        <fa-icon
          class="btn bg-blue"
          icon="info-circle"
        />
      </a>

如果您坚持在点击处理程序/javascript 中执行此操作，您也可以这样做：

export async function getLinkTutorial () {
  console.log('test')
  //const response = await apiClient.get('/tutorial')
  //return response.data
  var link = document.createElement('a');
  link.href = '/tutorial';
  link.setAttribute('download', 'tutorial.pdf');
  document.body.appendChild(link);
  link.click();
}