IT做网站工资怎么样,windows图标wordpress,seo营销专员,it培训网【PDF.js】PDF文件预览 一、PDF.js二、PDF.js 下载1、下载PDF.js2、在项目中引入3、屏蔽跨域错误 三、项目中使用四、说明五、实现效果 使用PDFJS实现pdf文件的预览#xff0c;支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。 一、PDF.js
官方地址 文档地址
二、PD… 【PDF.js】PDF文件预览 一、PDF.js二、PDF.js 下载1、下载PDF.js2、在项目中引入3、屏蔽跨域错误 三、项目中使用四、说明五、实现效果 使用PDFJS实现pdf文件的预览支持预览指定页、关键词搜索、缩略图、页面尺寸调整等等。 一、PDF.js
官方地址 文档地址
二、PDF.js 下载
1、下载PDF.js
下载地址 2、在项目中引入
将下载的压缩包解压并放入到项目中的public文件夹下我这里下载的是pdfjs-4.0.379-dist版本如下
3、屏蔽跨域错误
在 pdfjs-4.0.379-dist/web/viewer.mjs 内搜索 throw new Error(“file origin does not match viewer’s”) 并注释如果不注释可能会出现跨域错误无法正常预览文件。
三、项目中使用
内容区域结构(文件预览区域、滑块区域、问答区域) 滑块区域滑动改变pdf文件预览区域的大小
divv-iffilePreviewStore.getFilePreviewFlagrefresizeBoxclassresizemousedownonResizeMouseDown/el-main refmainContent classmain-content!-- 文件预览区域 --divv-iffilePreviewStore.getFilePreviewFlagclasspreview-box:style{width: ${previewBoxWidth}px}!-- PdfPreview v-if[ppt, pptx, pdf].includes(filePreviewStore.getFileType) / --PDF v-if[ppt, pptx, pdf].includes(filePreviewStore.getFileType) /ExcelPreview v-if[xls, xlsx].includes(filePreviewStore.getFileType) /WordPreview v-if[doc, docx].includes(filePreviewStore.getFileType) /TxtPreview v-iffilePreviewStore.getFileType txt //divdivv-iffilePreviewStore.getFilePreviewFlagrefresizeBoxclassresizemousedownonResizeMouseDown/!-- 问答区域 --div classmain_side3 flex1 column-flexdiv classshow_content flex1 refchatShowRef ChatShow / /divdiv classchataskInput //div/div
/el-main下面是PDF组件完整代码
templatediv classcontaineriframe idmyIframe :srcpdfUrl width100% height100%/iframe/div
/templatescript setup langts
import { onMounted, ref, watch } from vue
import { useFilePreviewStore } from /stores;
import { fileRouteUrl } from /utils/fileRouteUrlconst filePreviewStore useFilePreviewStore()
const pdfUrl ref() // pdf文件地址
const fileUrl /static/dist/pdfjs-4.0.379-dist/web/viewer.html?file // pdfjs文件地址onMounted(() {// encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。// 核心就是将 iframe 的 src 属性设置为 pdfjs 的地址然后将 pdf 文件的地址作为参数传递给 pdfjs// 例如http://localhost:8080/pdfjs-4.0.189-dist/web/viewer.html?filehttp%3A%2F%2Flocalhost%3A8080%2Fpdf%2Ftest.pdfconst url filePreviewStore.getFileUrl.replace(fileRouteUrl, /file)pdfUrl.value fileUrl encodeURIComponent(url) page${filePreviewStore.getPageNum}
})// 当文档页码修改时重新预览当前页的文档内容
watch(() filePreviewStore.getPageNum,(val) {if (val) {// 页码修改时需要重新保存记录文档页码否则会出现点击与第一次相同的页码时不会切换filePreviewStore.setFilePage(val)const pdfFrame document.getElementById(myIframe).contentWindow// 传递参数,跳转到指定页pdfFrame.PDFViewerApplication.pdfViewer.scrollPageIntoView({pageNumber: val})}}
)// 当预览的文件地址修改时预览新的文档
watch(() filePreviewStore.getFileUrl,(val) {if (val) {// 服务器文档地址const pdfFileUrl val.replace(fileRouteUrl, /file);// 加载PDF文件pdfUrl.value fileUrl encodeURIComponent(pdfFileUrl) page${filePreviewStore.getPageNum}}}
)/scriptstyle scoped langless
.container {width: 100%;height: 100%;border: 1px solid #ccc;box-sizing: border-box;#myIframe {border: none;}
}
/style
四、说明
1在文件地址后面添加参数page(预览指定页) 2在 pdfjs-4.0.379-dist/web/viewer.mjs中的setInitialView方法中添加如下代码 3改变文件预览区域的宽度
// 修改左侧文件预览区域的宽度
const previewBoxWidth ref(0)
const mainContent ref()
const resizeBox ref()
const mainContentWidth ref(0)
const onResizeMouseDown (e: MouseEvent) {const startX e.clientXresizeBox.value.left resizeBox.value.offsetLeft// 解决预览pdf文档时鼠标移入iframe后无法捕获移动和抬起操作const myIframe document.querySelector(iframe)myIframe (myIframe.style[pointer-events] none)const onDocumentMouseMove (e: MouseEvent) {const endX e.clientXconst previewWidth resizeBox.value.left (endX - startX) - side1Width.value - 20// 文件预览区域宽度最小为内容区域的30%最大为内容区域的70%if (previewWidth mainContentWidth.value * 0.7) {previewBoxWidth.value mainContentWidth.value * 0.7} else if (previewWidth mainContentWidth.value * 0.3) {previewBoxWidth.value mainContentWidth.value * 0.3} else {previewBoxWidth.value previewWidth}}const onDocumentMouseUp () {myIframe (myIframe.style[pointer-events] auto)document.removeEventListener(mousemove, onDocumentMouseMove)document.removeEventListener(mouseup, onDocumentMouseUp)resizeBox.value.releaseCapture resizeBox.value.releaseCapture()}document.addEventListener(mousemove, onDocumentMouseMove)document.addEventListener(mouseup, onDocumentMouseUp)resizeBox.value.setCapture resizeBox.value.setCapture()
}//
const { width } useWindowSize() // 响应式获取窗口尺寸
// 当浏览器窗口尺寸改变时重新修改设置文件预览区域的宽度
watch(() width.value,(val) {val (previewBoxWidth.value mainContentWidth.value * 0.7)}
)// 获取内容区域的宽度
useResizeObserver(mainContent , (entries) {const entry entries[0]const { width } entry.contentRectmainContentWidth.value width
})这里需要注意因为在PDF组件中使用了iframe当鼠标移入iframe区域时无法捕获到鼠标的移动和抬起动作会出现鼠标移出iframe区域后有可以改变该区域宽度解决办法如下
五、实现效果
