feat: 更新 pdf-view 默認縮放級別，優化縮放使默認顯示效果更佳清晰

packages/pdf-viewer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @orca-fe/pdf-viewer
 
+## 1.18.0
+
+### Minor Changes
+
+- feat: 更新 pdf-view 默認縮放級別，優化縮放使默認顯示效果更佳清晰
+
 ## 1.17.1
 
 ### Patch Changes

packages/pdf-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orca-fe/pdf-viewer",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "PDF Viewer",
   "keywords": [
     "react",

packages/pdf-viewer/src/PDFPage/PDFPage.tsx

@@ -5,6 +5,7 @@ import { floorBy } from '@orca-fe/tools';
 import type { PageViewport } from '../context';
 import PDFViewerContext from '../context';
 import useStyle from './PDFPage.style';
+import { PixelsPerInch } from '../utils';
 
 const globalOutputScale = Math.max(window.devicePixelRatio, 1);
 
@@ -26,7 +27,7 @@ const PDFPage = (props: PdfPageProps) => {
 
   const rootRef = useRef<HTMLDivElement>(null);
 
-  const scale = 2 ** zoom;
+  const scale = 2 ** zoom * PixelsPerInch.PDF_TO_CSS_UNITS;
 
   const [_this] = useState<{
     task?: any;
@@ -62,11 +63,8 @@ const PDFPage = (props: PdfPageProps) => {
 
     if (!render) return;
     if (canvas && page) {
-      // const viewport = page.getViewport({
-      //   scale: Math.min(4 * outputScale, scale),
-      // }) as PageViewport;
-      canvas.width = Math.round(viewport.width * outputScale);
-      canvas.height = Math.round(viewport.height * outputScale);
+      canvas.width = Math.ceil(viewport.width * outputScale);
+      canvas.height = Math.ceil(viewport.height * outputScale);
       canvas.hidden = true;
       const context = canvas.getContext('2d', { alpha: false });
       if (context) {

packages/pdf-viewer/src/PDFViewer.tsx

@@ -14,7 +14,7 @@ import { DownloadOutlined } from '@ant-design/icons';
 import type { PageViewport, PDFViewerHandle, RenderPageCoverFnType, PDFViewerInternalStateType, SourceType } from './context';
 import PDFViewerContext, { PDFToolbarContext } from './context';
 import PDFPage from './PDFPage';
-import { findSortedArr } from './utils';
+import { findSortedArr, PixelsPerInch } from './utils';
 import ZoomAndPageController from './ZoomAndPageController';
 import PDFToolbar from './PDFToolbar';
 import useStyle from './PDFViewer.style';
@@ -192,7 +192,7 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
       setZoom(newZoom);
       const pageDom = pageContainerRef.current;
       if (pageDom) {
-        pageDom.style.setProperty('--scale-factor', `${2 ** newZoom}`);
+        pageDom.style.setProperty('--scale-factor', `${2 ** newZoom * PixelsPerInch.PDF_TO_CSS_UNITS}`);
       }
       dom.scrollTop = newScrollTop;
       dom.scrollLeft = newScrollLeft;
@@ -240,9 +240,9 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
       if (zoomMode && _this.size && maxWidth && pageMaxHeight) {
         if (zoomMode === 'autoWidth') {
           // 调整缩放级别，使其与容器宽度匹配
-          newZoom = Math.log2((_this.size.width - 32) / pageMaxWidth);
+          newZoom = Math.log2((_this.size.width - 32) / PixelsPerInch.PDF_TO_CSS_UNITS / pageMaxWidth);
         } else if (zoomMode === 'autoHeight') {
-          newZoom = Math.log2((_this.size.height - 32) / pageMaxHeight);
+          newZoom = Math.log2((_this.size.height - 32) / PixelsPerInch.PDF_TO_CSS_UNITS / pageMaxHeight);
         }
       }
 
@@ -501,7 +501,7 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
 
           const pageDom = pageContainerRef.current;
           if (pageDom) {
-            pageDom.style.setProperty('--scale-factor', `${2 ** newZoom}`);
+            pageDom.style.setProperty('--scale-factor', `${2 ** newZoom * PixelsPerInch.PDF_TO_CSS_UNITS}`);
           }
           dom.scrollTop = newScrollTop;
           dom.scrollLeft = newScrollLeft;
@@ -697,8 +697,8 @@ const PDFViewer = React.forwardRef<PDFViewerHandle, PDFViewerProps>((props, pRef
                   }
                 }}
                 style={{
-                  '--scale-factor': scale,
-                  '--pdf-viewer-page-scale': scale,
+                  '--scale-factor': scale * PixelsPerInch.PDF_TO_CSS_UNITS,
+                  '--pdf-viewer-page-scale': scale * PixelsPerInch.PDF_TO_CSS_UNITS,
                 }}
               >
                 {viewports.length === 0 && !loading && !pluginLoading && emptyTips}

packages/pdf-viewer/src/utils.ts

@@ -1,9 +1,4 @@
-export function findSortedArr(
-  arr: number[],
-  value: number,
-  start = 0,
-  end = arr.length,
-) {
+export function findSortedArr(arr: number[], value: number, start = 0, end = arr.length) {
   const index = Math.floor((start + end) / 2);
   if (arr[end - 1] < value) return end;
   if (index === start) {
@@ -20,3 +15,11 @@ export function findSortedArr(
   if (arr[index - 1] < value) return index;
   return findSortedArr(arr, value, start, index);
 }
+
+export class PixelsPerInch {
+  static CSS = 96.0;
+
+  static PDF = 72.0;
+
+  static PDF_TO_CSS_UNITS = this.CSS / this.PDF;
+}