兼容性不太好#xff0c;部分手机预览不了#xff0c;所以采用v2版本。

相关依赖

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility//

https://gitcode.com/zloirock/core-js/overview?utm_sourcecsdn_github_acceleratorimport

structuredClone

core-js-pure/actual/structured-clone;//

TypeError:

https://github.com/wojtekmaj/react-pdf/issues/1465import

core-js/features/array/at;window.structuredClone

structuredClone;代码

refpdfViewContainerdivv-forpageNumber

state.pdfPagesv-showstate.pdfPageList.includes(pageNumber):keypageNumber:ref(el)

(pageRefs[pageNumber

https://developer.mozilla.org/en-US/docs/Web/API/structuredClone#browser_compatibility//

https://gitcode.com/zloirock/core-js/overview?utm_sourcecsdn_github_acceleratorimport

structuredClone

core-js-pure/actual/structured-clone;//

TypeError:

https://github.com/wojtekmaj/react-pdf/issues/1465import

core-js/features/array/at;import

pdfjsWorker

pdfjs-dist/lib/pdf.worker.js;//

pdfjsWorker

pdfjsWorker;window.structuredClone

structuredClone;//

pdfjs-dist/lib/pdf.worker.js;//

pdfjsWorker

pdfjs-dist/web/pdf_viewer.css;import

PDF

https://cdn.jsdelivr.net/npm/pdfjs-dist2.16.105/cmaps/,//

cMapPacked:

手势缩放PDF?.DefaultViewerConfig?.set({handToolOnDblClick:

true,});let

(navigator.userAgent.indexOf(QQ))

{//

https://www.qingcong.tech/technology/javascript/a-pdfjs-bug-in-qq.html#%E8%A7%A3%E5%86%B3%E5%8A%9E%E6%B3%95fetch(url).***n(async

(pdfData)

PDF.getDocument(url);loadingTask.promise.***n((pdf)

{pdfDoc

启用捏合缩放手势hammer.get(pinch).set({

enable:

启用拖动手势,设置拖动方向为所有方向,阈值为0hammer.get(pan).set({

direction:

捏合开始事件处理函数hammer.on(pinchstart,

(event)

计算新的缩放比例,限制在最小和最大缩放比例之间state.pdfScale

newScale;

更新初始缩放比例为当前缩放比例limitPanPosition();

重新渲染页面});//

pdfViewContainer.value.clientWidth;

containerHeight

pdfViewContainer.value.clientHeight;

averagePageHeight

pageRefs.value.reduce((totalHeight,

pageRef)

估算总高度,使用PDF文档的总页数乘以单个页面的平均高度const

estimatedTotalHeight

限制垂直拖动距离,确保PDF页面在容器内部,使用估算的总高度deltaY

Math.min(0,

estimatedTotalHeight));applyTransform();

应用变换}//

{pdfDoc.getPage(num).***n((page)

{//

document.createElement(canvas);//

ctx

ctx.webkitBackingStorePixelRatio

||ctx.mozBackingStorePixelRatio

||1;//

pdfViewContainer.value.clientWidth

||pdfViewContainer.value.offsetWidth

||pdfViewContainer.value.style.width;//

intialisedViewport

设置canvas的宽度为容器宽度乘以ratio,确保高分辨率下的清晰度canvas.width

pdfWrapperElWidth

设置canvas的高度为视口高度乘以ratio,确保高分辨率下的清晰度canvas.height

viewport.height

设置canvas的样式宽度为100%,与容器宽度一致canvas.style.width

100%;//

设置canvas的样式高度为auto,根据宽度自适应canvas.style.height

auto;//

缩放画布的渲染上下文,根据ratio进行缩放,确保在高分辨率下绘制的清晰度ctx.scale(ratio,

ratio);const

设置页面容器的高度为视口高度container.style.height

${viewport.height}px;page.render(renderContext).promise.***n(()

{state.pdfPageList.push(num);//

container

覆盖canvas元素container?.firstChild

container.removeChild(container.firstChild);container

container.appendChild(canvas);}).finally(()

{if

JSON.parse(decodeURIComponent(route.query.file));const

relName,

当前页面标题uni.setNavigationBarTitle({title:

relName,});}if