vue 实现预览pdf并可复制

你可以使用 Vue.js 来实现预览 PDF 并且可复制的功能。下面是一个简单的示例：

首先，你需要安装 `-pdf` 和 `vue-clipboard2` 两个库。

npm install vue-pdf vue-clipboard2

然后，在你的 Vue 组件中，引入并使用这两个库。

<template>
  <div>
    <div>
      <button @click="copyText">复制</button>
    </div>
    <div ref="pdfContainer">
      <pdf :src="pdfUrl" @num-pages="setNumPages" @page-loaded="setPageLoaded"></pdf>
    </div>
  </div>
</template>

<script>
import { PDF } from 'vue-pdf';
import VueClipboard from 'vue-clipboard2';

export default {
  components: {
    PDF,
  },
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf',
      numPages: 0,
      pageLoaded: 0,
    };
  },
  methods: {
    setNumPages(num) {
      this.numPages = num;
    },
    setPageLoaded(num) {
      this.pageLoaded = num;
    },
    copyText() {
      const textToCopy = `当前页码：${this.pageLoaded} / ${this.numPages}`;
      this.$copyText(textToCopy)
        .then(() => {
          // 复制成功
          alert('已复制到剪贴板');
        })
        .catch(() => {
          // 复制失败
          alert('复制失败');
        });
    },
  },
  mounted() {
    VueClipboard.config.autoSetContainer = true;
    this.$clipboard.$on('success', () => {
      // 复制成功后的回调
      console.log('复制成功');
    });
    this.$clipboard.$on('error', () => {
      // 复制失败后的回调
      console.log('复制失败');
    });
  },
};
</script>

在上面的代码中，`pdfUrl` 是你要预览的 PDF 文件的路径，你可以根据自己的需求进行修改。当用户点击 "复制" 按钮时，会将当前页码信息复制到剪贴板中。

注意：上述代码仅为示例，你可能需要根据你的具体需求进行适当地修改和调整。另外，确保你已经正确引入和注册了 `vue-pdf` 和 `vue-clipboard2` 库。