首页 > 其他分享 >vue-pdf插件实现文件预览,pdf要实现翻页显示

vue-pdf插件实现文件预览,pdf要实现翻页显示

时间:2024-11-14 17:31:19浏览次数:1  
标签:插件 vue const 翻页 CMapReaderFactory fileType pdf type


<img :src="fileUrl" v-if="type === 'jpg'"/>
<Pdf v-for="i in numPage" :page="i" :key="i" :src="fileUrl" v-if="type === 'pdf'"/>

import Pdf from 'vue-pdf';
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory';

data(){
  return {
    fileUrl: '',
    type: '',
    numPage: 0,
  }
},
components:{
  Pdf
}

const base64ToBlob(base64){
  const arr = base64.split(',');
  const type = arr[0].match(/:(.*?);/)[1];
  const fileType = type?.split('/')[1] || ''; //文件类型 - pdf
  const blob = atob(arr[1])
  let n = blob.length;
  const u8arr = new Unit8Array(n);
  while(n--){
    u8arr[n] = blob.charCodeAt(n);
  };
  return {
     fileBlob : new Blob([u8arr], { type: type }),
     fileType,
  }
}

//fileBase64为后端返回的base64格式的文件
cosnt {fileBlob, fileType} = base64ToBlob(fileBase64);
this.fileUrl = URL.createObjectURL(fileBlob);
this.type = fileType;
if(fileType === 'pdf'){
  let fileData = Pdf.createLoadingTask({url:fileBase64, CMapReaderFactory});
  fileData.promise.then(pdf=>{
    this.numPage = pdf.numPages;
  })
}

标签:插件,vue,const,翻页,CMapReaderFactory,fileType,pdf,type
From: https://www.cnblogs.com/domin520Jian/p/18542396

相关文章

  • 网页web无插件播放器EasyPlayer.js播放器firefox和chrome等浏览器报ws地址连接不上
    EasyPlayer.jsH5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)、WS、WEBRTC、FMP4视频直播与视频点播等多种协议,支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式,支持MSE、WASM、WebCodec等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器,使用简单......
  • 无插件H5播放器EasyPlayer.js视频流媒体播放器点播H264、H265需求(点播mp4、Hls)
    EasyPlayer.js视频流媒体播放器属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,无须安装任何插件,起播快、延迟低、兼容性强,使用非常便捷。EasyPlayer.js播放器不仅支持H.264与H.265视频编码格式,也能支持WebSocket-FLV、HTTP-FLV、HLS(m3u8)、WebRTC、ws-fm......
  • 网页直播/点播播放器EasyPlayer.js无插件H5播放器关于其后地址不带协议后缀的判断逻辑
    EasyPlayer.jsH5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)、WS、WEBRTC、FMP4视频直播与视频点播等多种协议,支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式,支持MSE、WASM、WebCodec等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器,使用简......
  • IDEA最新最全设置教程(包括常用的插件)
    一、目的统一安装一些必要的插件,方便大家开发。统一代码格式、注释格式、统一字符集编码。新加入的同事可以快速适应和熟悉,不需要在讲解IDEA配置问题。二、IDEA要修改的设置     新项目设置和设置1.Java编译版本  这里请使用自己的JDK2.统一I......
  • 第十二:BurpSuite安装下载浏览器代理插件(一)-重点
    一.BurpSuite下载浏览器代理插件1.浏览器代理插件名:SwitchyOmega2.设置代理规则3.设置代理端口:8080设置代理ip:127.0.0.1(本地地址)......
  • 外贸新手必看:20款谷歌工具插件推荐!
    谷歌开发客户大部分业务员都在用吧,今天推荐20个谷歌工具插件,助力外贸拓客,希望对大家有帮助。以下插件可以在Chrome网上应用店搜索安装到扩展程序。1.Hunter-电子邮件查找器Findemailaddressesfromanywhereontheweb,withjustoneclick.可以在网站上快速找到......
  • VS Code Jenkins Pipeline 开发的插件推荐
    VSCode有一些专门为JenkinsPipeline开发的插件,可以提供代码高亮、自动补全、语法检查等功能。以下是一些常用的插件:1.JenkinsPipelineLinterConnector功能:该插件允许你在VSCode中编写JenkinsPipeline并直接连接到Jenkins服务器进行语法检查。它会自动将Pipel......
  • 大模型研究报告 | 2024年中国金融大模型产业发展洞察报告|附34页PDF文件下载
    随着生成算法、预训练模型、多模态数据分析等AI技术的聚集融合,AIGC技术的实践效用迎来了行业级大爆发。通用大模型技术的成熟推动了新一轮行业生产力变革,在投入提升与政策扶植的双重作用下,以大模型技术为底座、结合专业化金融能力的金融大模型产品应运而生。对此,《2024年中......
  • Stable Diffusion教程|SD WebUI必备插件教程 菜鸟轻松成高手第二期Free U插件
    今天要给大家介绍一款进阶插件——FreeU。这个插件是一个很有意思的插件,可以为生成出来的图片在底噪上进行调整从而展现出完全不同的风格,以下是具体的使用教程。在教程开始前要事先申明,本教程的使用是建立在使用算网云平台SDWebuiforge镜像的基础上,如果使用秋叶安装包则不......
  • Java 项目注入、上传、搜索及插件挖掘的代码审计
    目录Java项目注入、上传、搜索及插件挖掘的代码审计一、什么是Java项目注入、上传、搜索及插件挖掘的代码审计二、原理(一)注入原理(二)文件上传原理(三)搜索功能安全原理(四)插件安全原理三、步骤与代码示例(一)准备工作(二)注入攻击审计步骤与代码示例(三)文件上传审计步骤与......