wordpress 直接拖拽式建站,房屋信息网站,电商平台seo,广东智慧团建注册登录入口【vue3vue-pdf-embed】实现PDF图片预览项目背景项目代码分析代码项目背景
技术栈#xff1a;vue3Tselementplus 需要实现PDF和图片预览 图片预览很好解决了#xff0c;可以用elementplus 自带的组件el-image 可实现 PDF预览可以用搜了一圈#xff0c;有两个方案#xff0c…
【vue3vue-pdf-embed】实现PDF图片预览项目背景项目代码分析代码项目背景
技术栈vue3Tselementplus 需要实现PDF和图片预览 图片预览很好解决了可以用elementplus 自带的组件el-image 可实现 PDF预览可以用搜了一圈有两个方案一个是vue-office-pdf另一个是vue-pdf-embed 由于项目需求只需要做预览且只支持 PDF也不需要什么高级文档操作功能所以我就采用了vue-pdf-embed
项目代码
html 代码
my-dialog refmyDialogRef width60% max-height70vhdiv v-loadingdialogLoading classreviewDivel-image v-ifimageDialogVisible :srcimageSrc stylemax-width: 100%; fitcontain /vue-pdf-embed v-else refpdfRef :sourceimageSrc :pagepdfPage password-requestedhandlePasswordRequest renderedhandleDocumentRender /div v-show!imageDialogVisible pageCount classtext-centerel-button :disabledpdfPage 1 clickpdfPage--❮/el-buttonspan classmx-4{{ pdfPage }} / {{ pageCount }}/spanel-button :disabledpdfPage pageCount clickpdfPage❯/el-button/div/div
/my-dialogjs 代码
const imageSrc ref()
const myDialogRef ref()
const imageDialogVisible refboolean(false)
const dialogLoading refboolean(false)
const openFileDialog (file: any) {dialogLoading.value true// 释放之前创建的对象URLif (imageSrc.value) {URL?.revokeObjectURL(imageSrc.value)}// 创建新的对象URLif (file.raw) {// 本地预览imageSrc.value URL?.createObjectURL(file.raw)dialogLoading.value false} else {// 编辑远程预览const targetFile getTargetFile.value(file)apiDownloadFile(targetFile[0].fileDocumentId).then((response: any) {imageSrc.value response.request.responseURLsetTimeout(() {dialogLoading.value false}, 1000)})}const isImage judgeIcon(file) imagemyDialogRef.value?.openDialog(isImage ? 图片预览 : PDF预览)if (isImage) {imageDialogVisible.value true} else {imageDialogVisible.value false}
}const pdfPage refnumber(1)
const pageCount refnumber(0)
const pdfRef ref()
function handleDocumentRender () {pageCount.value pdfRef.value?.doc?.numPages // 这里是重点
}function handlePasswordRequest (callback: any, retry: boolean) {callback(prompt(retry ? Enter password again : Enter password))
}分析代码
首先预览有本地预览和远程预览
本地预览顾名思义就是在本地上传还没有调接口的PDF或图片进行预览这时候通过URL 接口里面的静态方法并往里面传file.raw 便可得到 本地PDF/图片链接了 具体请看这里URL:createObjectURL() 静态方法远程预览即从后端接口返回回来的PDF/图片 进行预览这时候需要先调用下载接口 接口会返回 对应的链接 通过以上两步可以把 需要传递的 source 的值搞定
需要PDF很大有很多页这时候预览需要分页但是分页的时候有一个问题就是一直找不到对应的总页码即pageCount 有看很多文章要么通过rendered方法传参但文档根据不支持传参 vue-pdf-embed 后面自己试了一下居然 使用 ref 的方式 pdfRef.value?.doc?.numPages ,拿到了总页码至此后面就很容易解决了
