vue预览pdf隐藏下载按钮

在 Vue 中预览 PDF 并隐藏下载按钮，您可以使用 PDF.js 库来加载 PDF 文件，并使用 CSS 来隐藏下载按钮。以下是一个简单的示例：

1. 安装 PDF.js 库

npm install pdfjs-dist

2. 在 Vue 组件中引入 PDF.js 和样式文件

import pdfjsLib from 'pdfjs-dist/build/pdf';
import 'pdfjs-dist/web/pdf_viewer.css';

3. 创建一个 PDF 预览的组件，使用 PDF.js 加载 PDF 文件

<template>
  <div ref="pdfViewer"></div>
</template>

<script>
export default {
  data() {
    return {
      pdfUrl: 'path/to/pdf/file.pdf',
      pdfViewer: null
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    loadPdf() {
      const viewerContainer = this.$refs.pdfViewer;
      const pdfViewer = new pdfjsLib.PDFViewer({
        container: viewerContainer
      });
      viewerContainer.addEventListener('pagesinit', () => {
        pdfViewer.eventBus.dispatch('toggleSecondaryToolbar', { visible: false });
      });
      pdfjsLib.getDocument(this.pdfUrl).promise.then(pdf => {
        pdfViewer.setDocument(pdf);
        this.pdfViewer = pdfViewer;
      });
    }
  }
};
</script>

在上面的代码中，我们创建了一个 `PDFViewer` 实例，并将其添加到 Vue 组件的 DOM 中。一旦 PDF 文件加载完成，我们可以将 `pdfViewer` 对象保存到组件的数据中，以便在以后的操作中使用。

在 `pagesinit` 事件中，我们使用 PDF.js 的 `eventBus` 对象来切换 PDF 查看器的次要工具栏可见性，从而隐藏下载按钮。

最后，我们使用 `pdfjsLib.getDocument` 方法来加载 PDF 文件并将其设置到 `pdfViewer` 中。

4. 在样式文件中隐藏下载按钮

button.toolbarButton.download {
  display: none !important;
}

在上面的样式中，我们使用 `!important` 来覆盖 PDF.js 中下载按钮的默认样式，并将其设置为 `display: none` 来隐藏该按钮。

这样，在 Vue 组件中预览 PDF 时，下载按钮就会被隐藏。