vue2 pdfjs-dist

Vue2 和 PDF.js-Dist 的结合主要是为了在 Vue 框架项目中处理PDF文档。PDF.js-Dist是一个轻量级的JavaScript库，它提供了一个在浏览器环境中查看、交互和渲染PDF文件的功能，而不需要依赖Adobe Reader。

在Vue2项目中，你可以通过npm或yarn安装`pdfjs-dist`库，并将其作为组件引入，然后利用PDFJS提供的API加载、预览和操作PDF内容。例如，你可能会创建一个自定义的Vue组件，用户可以上传PDF文件，组件会使用PDF.js解析并展示PDF内容，支持缩放、搜索、页面导航等功能。

以下是简单的步骤示例：

1. 安装依赖：

npm install vue-pdfjs-renderer pdfjs-dist

或者

yarn add vue-pdfjs-renderer pdfjs-dist

2. 创建Vue组件：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <vue-pdf-js :src="pdfSrc" />
  </div>
</template>

<script>
import { loadScript } from 'vue-pdfjs-renderer';
import * as PDFJS from 'pdfjs-dist';

export default {
  data() {
    return {
      pdfSrc: null,
    };
  },
  methods: {
    async handleFileChange(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.onload = () => {
        this.pdfSrc = URL.createObjectURL(file);
        await this.loadPDF();
      };
      reader.readAsArrayBuffer(file);
    },
    async loadPDF() {
      await loadScript(PDFJS);
      PDFJS.getDocument(this.pdfSrc).promise.then(pdf => {
        // 然后你可以访问pdf对象并操作PDF文档
      });
    },
  },
};
</script>

在这个例子中，`vue-pdf-js`是基于`pdfjs-dist`的封装库，如vue-pdf-js-renderer，它简化了PDF文件的操作流程。