亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue實現(xiàn)PDF文件預覽的方法詳解

 更新時間：2023年09月26日 09:51:48   作者：fby  
pdf文件預覽是開發(fā)業(yè)務時常見的一個交互,在toB項目中是經(jīng)常用到的,對于用戶上傳文件,預覽文件等操作時有一個更好的體驗,下面我結合實際業(yè)務,在vue的基礎上與大家分享這個實現(xiàn)方法,需要的朋友可以參考下

一.安裝vue-pdf和vue-pdf-embed這兩個庫

在業(yè)務組件中導入

   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.實現(xiàn)預覽方法

const getNumPages = () => {
  //創(chuàng)建加載任務
  let loadingTask = pdf.createLoadingTask(pdfSrc.value);
  loadingTask.promise
    .then((pdf: any) => {
     //獲取pdf的頁數(shù)
      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實現(xiàn)PDF文件預覽的方法詳解的詳細內(nèi)容，更多關于Vue實現(xiàn)PDF文件預覽的資料請關注腳本之家其它相關文章！

相關文章

最新評論