vue2 使用pdf.js 实现pdf预览，并可复制文本

<template>
  <div>
    <pdf
      :src="pdfSrc"
      v-for="pageNumber in numPages"
      :key="pageNumber"
      :page="pageNumber"
      @num-pages="numPages = $event"
    ></pdf>
    <button @click="copyPdfText">复制PDF文本</button>
  </div>
</template>
 
<script>
import pdf from 'vue-pdf'
 
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfSrc: 'path/to/your/pdf/file.pdf',
      numPages: 0
    }
  },
  methods: {
    copyPdfText() {
      // 这里需要使用PDF.js的API来获取PDF文本内容
      // 假设你已经有了一个方法来获取PDF文本，这里是一个示例方法
      this.getPdfText().then(text => {
        navigator.clipboard.writeText(text).then(() => {
          console.log('PDF文本已复制到剪贴板');
        }).catch(err => {
          console.error('复制到剪贴板时发生错误:', err);
        });
      }).catch(err => {
        console.error('获取PDF文本时发生错误:', err);
      });
    },
    getPdfText() {
      // 这个方法需要使用PDF.js的API来实现，返回一个Promise
      // 这里只是示例，实际的实现需要根据PDF.js的API来编写
      // 假设你已经有了一个方法来获取PDF文本，这里是一个示例返回Promise
      return new Promise((resolve, reject) => {
        // 假设你已经有了pdfjsLib对象，并且已经加载了PDF文档
        const loadingTask = pdfjsLib.getDocument('path/to/your/pdf/file.pdf');
        loadingTask.promise.then(pdf => {
          const text = ''; // 这里应该是获取到PDF文档的文本内容
          resolve(text);
        }).catch(err => {
          reject(err);
        });
      });
    }
  }
}
</script>

在这个代码示例中，我们使用了vue-pdf组件来渲染PDF文档，并通过@num-pages来获取PDF的总页数。我们还添加了一个按钮，当点击按钮时，会触发copyPdfText方法，该方法使用navigator.clipboard.writeText()方法将PDF文本复制到剪贴板。这里假设你已经有了获取PDF文本的方法，这个方法需要使用PDF.js的API来实现，返回一个Promise。实际的实现需要根据PDF.js的API来编写。