vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue实现PDF文件预览

Vue实现PDF文件预览的方法详解

作者:fby

pdf文件预览是开发业务时常见的一个交互,在toB项目中是经常用到的,对于用户上传文件,预览文件等操作时有一个更好的体验,下面我结合实际业务,在vue的基础上与大家分享这个实现方法,需要的朋友可以参考下

一.安装vue-pdf和vue-pdf-embed这两个库

在业务组件中导入

   import pdf from "vue-pdf";
   import VuePdfEmbed from "vue-pdf-embed";

二.在上传文件组件的文件列表处绑定预览方法

        <Upload.Dragger
          style="position: relative; width: 80%; cursor: pointer"
          :maxCount="1"
          :beforeUpload="beforeUpload"
          accept=".pdf"
          @remove="removeFile"
          @preview="getNumPages" //预览文件
        >
          <div>
            <p class="ant-upload-drag-icon">
              <CloudUploadOutlined />
            </p>
            <p class="ant-upload-text">点击或将文件拖拽到此处</p>
            <p class="ant-upload-hint">支持pdf类型的文件</p>
          </div>
        </Upload.Dragger>
      </Form.Item>

1.在beforeUpload方法中获取文件的url

const beforeUpload = async (file: FileType) => {
  //获取文件的url格式
  pdfSrc.value = URL.createObjectURL(file);
  if (file.size / 1024 / 1024 > 50) {
    message.error("文件大小不可超过50MB");
    return Upload.LIST_IGNORE;
  }
  if (filename !== ".pdf") {
    message.warn("请选择指定的文件格式");
    return;
  }
  return false;
};

2.实现预览方法

const getNumPages = () => {
  //创建加载任务
  let loadingTask = pdf.createLoadingTask(pdfSrc.value);
  loadingTask.promise
    .then((pdf: any) => {
     //获取pdf的页数
      numPages.value = pdf.numPages;
    })
    .catch((err: any) => {
      console.error("pdf 加载失败", err);
    });
  pv.value = true;
};

三.在弹窗中加载预览窗口

<Modal v-model:visible="pv" :width="700">
    <div v-if="pv">
      <VuePdfEmbed
        v-for="item in numPages"
        :key="item"
        :source="pdfSrc"
        class="vue-pdf-embed"
        :page="item"
        style="1"
      >
      </VuePdfEmbed>
    </div>
  </Modal>

效果图

以上就是Vue实现PDF文件预览的方法详解的详细内容,更多关于Vue实现PDF文件预览的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文