vue点击按钮预览下载功能

你可以使用 HTML5 的 `<a>` 元素来实现预览下载功能，代码如下：

<template>
  <div>
    <button @click="previewPDF">预览 PDF</button>
    <button @click="downloadPDF">下载 PDF</button>
  </div>
</template>

<script>
export default {
  methods: {
    previewPDF() {
      // 替换为你需要预览的 PDF 文件路径
      const pdfUrl = 'https://example.com/pdf/sample.pdf';
      window.open(pdfUrl, '_blank');
    },
    downloadPDF() {
      // 替换为你需要下载的 PDF 文件路径
      const pdfUrl = 'https://example.com/pdf/sample.pdf';
      const link = document.createElement('a');
      link.href = pdfUrl;
      link.download = 'sample.pdf';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
};
</script>

其中，`previewPDF` 方法使用 `window.open` 方法打开一个新窗口来预览 PDF 文件，`downloadPDF` 方法则使用动态创建 `<a>` 元素和 `link.click()` 方法来实现下载功能。需要注意的是，`link.download` 属性会指定下载的文件名，你需要根据实际情况进行替换。