更新

public/pdf/build/pdf.js

@@ -365,7 +365,7 @@ var BaseCanvasFactory = /*#__PURE__*/function () {
       if (width <= 0 || height <= 0) {
         throw new Error("Invalid canvas size");
       }
-
+      
       canvasAndContext.canvas.width = width;
       canvasAndContext.canvas.height = height;
     }
@@ -674,7 +674,7 @@ var PageViewport = /*#__PURE__*/function () {
     _classCallCheck(this, PageViewport);
 
     this.viewBox = viewBox;
-    this.scale = scale;
+    this.scale = 0.51 //scale;
     this.rotation = rotation;
     this.offsetX = offsetX;
     this.offsetY = offsetY;

public/pdf/web/utils.js

@@ -1,40 +0,0 @@
-function phoneValidate(phone) {
-	var reg = /^1(3|4|5|6|7|8|9)\d{9}$/
-	if (reg.test(phone)) {
-		return true
-	} else {
-		return false
-	}
-}
-
-function getQueryVariable(variable) {
-	var query = window.location.search.substring(1);
-	var vars = query.split("&");
-	for (var i = 0; i < vars.length; i++) {
-		var pair = vars[i].split("=");
-		if (pair[0] == variable) {
-			return pair[1];
-		}
-	}
-	return (false);
-}
-function browser() {
-	var u = navigator.userAgent
-	//   app = navigator.appVersion;
-	return {
-	  trident: u.indexOf('Trident') > -1, //IE内核
-	  presto: u.indexOf('Presto') > -1, //opera内核
-	  webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
-	  gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
-	  mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
-	  ios: !!u.match(/Mac OS X/), //ios终端
-	  // ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
-	  android: u.indexOf('DAYAAPPA') > -1 || u.indexOf('Adr') > -1, //android终端
-	  iPhone: u.indexOf('DAYAAPPI') > -1, //是否为iPhone或者QQHD浏览器
-	  isApp: u.indexOf('DAYAAPPI') > -1 || u.indexOf('DAYAAPPA') > -1 || u.indexOf('Adr') > -1,
-	  iPad: u.indexOf('iPad') > -1, //是否iPad
-	  webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
-	  weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
-	  qq: u.match(/\sQQ/i) == " qq" //是否QQ
-	}
-  }

public/pdf/web/viewer.css

@@ -286,14 +286,14 @@
   direction: ltr;
   width: 816px;
   height: 1056px;
-  margin: 1px auto -8px;
+  margin: 0 auto -8px;
   position: relative;
   overflow: visible;
-  border: 9px solid transparent;
-  background-clip: content-box;
+  /* border: 9px solid transparent; */
+  /* background-clip: content-box;
   -o-border-image: url(images/shadow.png) 9 9 repeat;
      border-image: url(images/shadow.png) 9 9 repeat;
-  background-color: rgba(255, 255, 255, 1);
+  background-color: rgba(255, 255, 255, 1); */
 }
 
 .pdfViewer.removePageBorders .page {
@@ -452,7 +452,7 @@
   --overlay-button-hover-color: rgba(12, 12, 13, 0.3);
 
   --loading-icon: url(images/loading.svg);
-  --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
+  /* --treeitem-expanded-icon: url(images/treeitem-expanded.svg);
   --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg);
   --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg);
   --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle.svg);
@@ -486,7 +486,7 @@
   --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg);
   --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg);
   --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg);
-  --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg);
+  --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg); */
 }
 
 @media (prefers-color-scheme: dark) {
@@ -547,8 +547,7 @@ html {
 body {
   height: 100%;
   width: 100%;
-  background-color: rgba(237, 237, 240, 1);
-  background-color: var(--body-bg-color);
+  background-color: #fff;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -2307,7 +2306,7 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
   background-color: var(--dropdown-btn-bg-color);
   }
 }
-.dropdownToolbarButton::after {
+/* .dropdownToolbarButton::after {
   top: 6px;
   pointer-events: none;
 
@@ -2316,7 +2315,7 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
   -webkit-mask-image: var(--toolbarButton-menuArrow-icon);
   mask-image: url(images/toolbarButton-menuArrow.svg);
   mask-image: var(--toolbarButton-menuArrow-icon);
-}
+} */
 html[dir="ltr"] .dropdownToolbarButton::after {
   right: 7px;
 }
@@ -2520,7 +2519,7 @@ html[dir="ltr"] .secondaryToolbarButton::before {
 html[dir="rtl"] .secondaryToolbarButton::before {
   right: 12px;
 }
-
+/* 
 .toolbarButton#sidebarToggle::before {
   -webkit-mask-image: url(images/toolbarButton-sidebarToggle.svg);
   -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon);
@@ -2637,7 +2636,7 @@ html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
   -webkit-mask-image: var(--toolbarButton-download-icon);
   mask-image: url(images/toolbarButton-download.svg);
   mask-image: var(--toolbarButton-download-icon);
-}
+} */
 
 .secondaryToolbarButton.bookmark {
   padding-top: 6px;
@@ -2648,7 +2647,7 @@ html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before {
   opacity: 0.5;
   pointer-events: none;
 }
-
+/* 
 .toolbarButton.bookmark::before {
   -webkit-mask-image: url(images/toolbarButton-bookmark.svg);
   -webkit-mask-image: var(--toolbarButton-bookmark-icon);
@@ -2709,7 +2708,7 @@ html[dir="rtl"] #currentOutlineItem.toolbarButton::before {
   -webkit-mask-image: var(--toolbarButton-search-icon);
   mask-image: url(images/toolbarButton-search.svg);
   mask-image: var(--toolbarButton-search-icon);
-}
+} */
 
 .toolbarButton.pdfSidebarNotification::after {
   position: absolute;
@@ -2756,7 +2755,7 @@ html[dir="ltr"] .secondaryToolbarButton > span {
 html[dir="rtl"] .secondaryToolbarButton > span {
   padding-left: 4px;
 }
-
+/* 
 .secondaryToolbarButton.firstPage::before {
   -webkit-mask-image: url(images/secondaryToolbarButton-firstPage.svg);
   -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon);
@@ -2846,7 +2845,7 @@ html[dir="rtl"] .secondaryToolbarButton > span {
   -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon);
   mask-image: url(images/secondaryToolbarButton-documentProperties.svg);
   mask-image: var(--secondaryToolbarButton-documentProperties-icon);
-}
+} */
 
 .verticalToolbarSeparator {
   display: block;

public/pdf/web/viewer.js

@@ -1204,7 +1204,6 @@ var PDFViewerApplication = {
       newScale = Math.ceil(newScale * 10) / 10;
       newScale = Math.min(_ui_utils.MAX_SCALE, newScale);
     } while (--ticks > 0 && newScale < _ui_utils.MAX_SCALE);
-
     this.pdfViewer.currentScaleValue = newScale;
   },
   zoomOut: function zoomOut(ticks) {
@@ -1219,7 +1218,6 @@ var PDFViewerApplication = {
       newScale = Math.floor(newScale * 10) / 10;
       newScale = Math.max(_ui_utils.MIN_SCALE, newScale);
     } while (--ticks > 0 && newScale > _ui_utils.MIN_SCALE);
-
     this.pdfViewer.currentScaleValue = newScale;
   },
   zoomReset: function zoomReset() {
@@ -1854,7 +1852,6 @@ var PDFViewerApplication = {
           _this12.loadingBar.hide();
 
           document.querySelector('#m_loading').style.display = 'none'
-
           _this12.disableAutoFetchLoadingBarTimeout = null;
         }, DISABLE_AUTO_FETCH_LOADING_BAR_TIMEOUT);
       }
@@ -1871,7 +1868,6 @@ var PDFViewerApplication = {
 
       _this13.loadingBar.hide();
       document.querySelector('#m_loading').style.display = 'none'
-
       firstPagePromise.then(function () {
         _this13.eventBus.dispatch("documentloaded", {
           source: _this13
@@ -2691,6 +2687,15 @@ var PDFViewerApplication = {
                 source: _this17
               });
 
+
+              console.log(document.querySelectorAll('canvas'), 'title')
+              
+              setTimeout(() => {
+                const canvas = document.querySelectorAll('canvas')[0]
+                if(canvas) {
+                  canvas.style.margin = '0.1px'
+                }
+              }, 300);
             case 28:
             case "end":
               return _context18.stop();
@@ -5013,7 +5018,7 @@ var UNKNOWN_SCALE = 0;
 exports.UNKNOWN_SCALE = UNKNOWN_SCALE;
 var MAX_AUTO_SCALE = 1.25;
 exports.MAX_AUTO_SCALE = MAX_AUTO_SCALE;
-var SCROLLBAR_PADDING = 40;
+var SCROLLBAR_PADDING = 0;
 exports.SCROLLBAR_PADDING = SCROLLBAR_PADDING;
 var VERTICAL_PADDING = 5;
 exports.VERTICAL_PADDING = VERTICAL_PADDING;
@@ -12310,7 +12315,6 @@ var TempImageFactory = function TempImageFactoryClosure() {
         tempCanvas = document.createElement("canvas");
         tempCanvasCache = tempCanvas;
       }
-
       tempCanvas.width = width;
       tempCanvas.height = height;
       tempCanvas.mozOpaque = true;
@@ -18762,6 +18766,7 @@ function renderPage(activeServiceOnEntry, pdfDocument, pageNumber, size, printRe
   scratchCanvas.height = Math.floor(size.height * PRINT_UNITS);
   var width = Math.floor(size.width * _ui_utils.CSS_UNITS) + "px";
   var height = Math.floor(size.height * _ui_utils.CSS_UNITS) + "px";
+
   var ctx = scratchCanvas.getContext("2d");
   ctx.save();
   ctx.fillStyle = "rgb(255, 255, 255)";

src/views/accompany/music-detail.module.less

@@ -109,8 +109,8 @@
 .showImgContainer {
   padding: 0 11px;
   height: calc(100vh - var(--header-height) - var(--footer-height) - 164px);
-  flex: 1 auto;
-  overflow: hidden;
+  // flex: 1 auto;
+  // overflow: hidden;
 
 
   .musicImg {

src/views/accompany/music-detail.tsx

@@ -30,6 +30,7 @@ export default defineComponent({
     const partColumns = ref<any>([])
     const staffData = reactive({
       details: {} as any,
+      musicPdfUrl: '',
       status: false,
       open: false,
       audioReady: false,
@@ -114,8 +115,36 @@ export default defineComponent({
 
     const renderStaff = async () => {
       try {
-        // staffData.iframeSrc = `https://mantest.dayaedu.com/accompany/osmd/index.html`
-        staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
+        if (staffData.musicPdfUrl) {
+          // staffData.iframeSrc =
+          //   "/pdf/web/viewer.html?file=" +
+          //   encodeURIComponent(staffData.musicPdfUrl) + "&t=" + Date.now();
+          // https://cdn.oss.dayaedu.com/daya202409/UOFW4q5.pdf
+          // https://cdn.oss.dayaedu.com/daya202409/UOFVK2A.pdf
+          // https://cdn.oss.dayaedu.com/daya202409/UODQffO.pdf
+
+          // staffData.iframeSrc = `${location.origin}${
+          //   location.pathname
+          // }pdf/web/viewer.html?file=${encodeURIComponent(staffData.musicPdfUrl)}&t=${Date.now()}`
+
+          // const iframeRef = document.querySelector("#staffIframeRef") as any
+          // iframeRef.contentWindow.location.replace("/pdf/web/viewer.html?file=" +
+          // encodeURIComponent(staffData.musicPdfUrl) + "&t=" + Date.now());
+
+          const iframeRef = document.querySelector("#staffIframeRef") as any
+          iframeRef.contentWindow.location.replace( `${location.origin}${
+              location.pathname
+            }pdf/web/viewer.html?file=${encodeURIComponent(staffData.musicPdfUrl)}&t=${Date.now()}`);
+        } else {
+          // staffData.iframeSrc = `/osmd/index.html`;
+          // staffData.iframeSrc = `${location.origin}${location.pathname}osmd/index.html`
+          // const iframeRef = document.querySelector("#staffIframeRef") as any
+          // iframeRef.contentWindow.location.replace(`/osmd/index.html`);
+
+          const iframeRef = document.querySelector("#staffIframeRef") as any
+          iframeRef.contentWindow.location.replace(`${location.origin}${location.pathname}osmd/index.html`);
+          
+        }
       } catch (error) {
         //
       }
@@ -136,9 +165,31 @@ export default defineComponent({
       return partNames.filter((text: string) => text.toLocaleUpperCase() !== 'COMMON') || []
     }
 
+    /** 获取分轨信息 */
+    const getInstrumentItem = (instruments: any, name = '') => {
+      name = name.toLocaleLowerCase().replace(/ /g, '') //.replace(/\d*/gi, '')
+      if (!name) return ''
+      for (let key in instruments) {
+        const item = instruments[key]
+        const _key = item.track?.toLocaleLowerCase().replace(/ /g, '') //.replace(/\d*/gi, '')
+        console.log(_key)
+        if (_key === name) {
+          return item
+        }
+      }
+      // for (let key of instruments) {
+      //   const _key = key.toLocaleLowerCase().replace(/ /g, '')
+      //   if (name.includes(_key)) {
+      //     return key
+      //   }
+      // }
+      return ''
+    }
+
     const toDetail = async (row: any) => {
       if (row.musicSheetType === 'SINGLE') {
         loading.value = false
+        staffData.musicPdfUrl = row.musicPdfUrl
         return
       }
       staffData.partNames = await getPartNames(row.xmlFileUrl)
@@ -152,6 +203,7 @@ export default defineComponent({
         return {
           text: item.track + (instrumentName ? `(${instrumentName})` : ''),
           instrumentName: instrumentName,
+          track: item.track,
           xmlIndex,
           value: index
         }
@@ -160,6 +212,25 @@ export default defineComponent({
       const defaultShowStaff = partColumns.value[staffData.selectedPartIndex]
       staffData.selectedPartName = defaultShowStaff.instrumentName
       staffData.partXmlIndex = defaultShowStaff.xmlIndex
+
+      if (row.musicSheetType === 'SINGLE') {
+        staffData.musicPdfUrl = row.musicPdfUrl
+      } else {
+        // 是否为并
+        if(staffData.isComberRender) {
+          staffData.musicPdfUrl = row.musicPdfUrl
+        } else {
+          const item = getInstrumentItem(
+            staffData.details?.background || [],
+            partColumns.value[staffData.selectedPartIndex]?.track
+          )
+          if (item) {
+            staffData.musicPdfUrl = item.musicPdfUrl
+          } else {
+            staffData.musicPdfUrl = ''
+          }
+        }
+      }
     }
 
     const getMusicDetail = async () => {
@@ -304,7 +375,36 @@ export default defineComponent({
                 <Skeleton title row={7} />
               </>
             )}
-            <iframe
+
+            {staffData.details.id ? staffData.musicPdfUrl ? (
+              <iframe
+                style={{
+                  opacity: loading.value ? 0 : 1,
+                  width: '100%',
+                  height: '100%'
+                }}
+                id="staffIframeRef"
+                // src={staffData.iframeSrc}
+                onLoad={() => {
+                  // 判断是用哪个渲染的
+                  loading.value = false
+                }}
+              ></iframe>
+            ) : (
+              <iframe
+                id="staffIframeRef"
+                style={{
+                  opacity: loading.value ? 0 : 1,
+                  width: '100%',
+                  height: '100%'
+                }}
+                // src={staffData.iframeSrc}
+                onLoad={() => {
+                  musicIframeLoad()
+                }}
+              ></iframe>
+            ) : ''}
+            {/* <iframe
               id="staffIframeRef"
               style={{
                 opacity: loading.value ? 0 : 1,
@@ -313,7 +413,7 @@ export default defineComponent({
               }}
               src={staffData.iframeSrc}
               onLoad={musicIframeLoad}
-            ></iframe>
+            ></iframe> */}
             {/* </> */}
             {/* // ) : (
             //   <>
@@ -442,8 +542,32 @@ export default defineComponent({
               staffData.partXmlIndex = value.selectedOptions[0].xmlIndex
               // openView({ id: staffData.instrumentName })
               nextTick(() => {
-                resetRender()
-              })
+                const item = getInstrumentItem(staffData.details.background || [], value.selectedOptions[0].track);
+                console.log(item, 'nextTick', staffData.details)
+                let tempPdf = ""
+                if (staffData?.isComberRender) {
+                  if (staffData?.musicPdfUrl) {
+                      tempPdf = staffData?.musicPdfUrl
+                  }
+                } else {
+                  tempPdf = item?.musicPdfUrl
+                }
+                if (tempPdf) {
+                  staffData.musicPdfUrl = tempPdf
+                  // staffLoading.value = true
+                  renderStaff()
+                } else {
+                  staffData.musicPdfUrl = ""
+                  loading.value = true
+                  // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
+                  if (staffData.iframeSrc.indexOf("pdf/web") !== -1) {
+                      renderStaff()
+                  } else {
+                      resetRender()
+                  }
+                }
+                // console.log(value, "value", item);
+              });
             }}
             onCancel={() => (staffData.open = false)}
           />

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
 // const proxyUrl = 'https://online.lexiaoya.cn/';
-const proxyUrl = 'https://dev.lexiaoya.cn/'
+const proxyUrl = 'https://test.lexiaoya.cn/'
 // const proxyUrl = 'http://47.98.131.38:8989/'
 // const proxyUrl = 'http://192.168.3.20:8989/' // 邹旋
 // const proxyUrl = 'http://192.168.3.143:8989/' // 尚科