修改问题

public/osmd/index.html

@@ -117,11 +117,11 @@
         .then(
           function () {
             // 是否合并显示
-            if (!isComberRender) {
-              for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
-                osmd.Sheet.Instruments[i].Visible = i === partIndex;
-              }
-            }
+            // if (!isComberRender) {
+            //   for (let i = 0; i < osmd.Sheet.Instruments.length; i++) {
+            //     osmd.Sheet.Instruments[i].Visible = i === partIndex;
+            //   }
+            // }
 
             osmd.zoom = .5
             render();

public/pdf/web/viewer.html

@@ -522,6 +522,7 @@ See https://github.com/adobe-type-tools/cmap-resources
 
   <script src="viewer.js"></script>
   <script>
+    localStorage.removeItem("pdfjs.history")
    function getQueryVariable(variable) {
       if (window.location.hash.indexOf("?") < 0) {
         return null;

src/views/cloudPractice/cloudPractice.tsx

@@ -107,7 +107,6 @@ export default defineComponent({
                isComberRender: item?.isScoreRender,
                musicPdfUrl: item?.musicPdfUrl // 独奏使用PDF
             }
-            console.log(tempList, "tempList")
          } else if (userStoreHook.roles === "GYT") {
             tempList = {
                id: list?.id,
@@ -133,7 +132,6 @@ export default defineComponent({
                isComberRender: false,
                musicPdfUrl: list?.musicPdfUrl
             }
-            console.log(tempList, "tempList")
          }
          return tempList
       })
@@ -710,8 +708,6 @@ export default defineComponent({
       const handleGetList = async () => {
          if (loading.value) return
          state.listActive = 0
-         state.selectedPartIndex = 0
-         state.partXmlIndex = 0
          state.showPlayer = false
          state.playState = "pause"
          state.partNames = []
@@ -719,6 +715,7 @@ export default defineComponent({
          state.selectedPartName = ""
          state.selectedTrack = ""
          state.selectedPartIndex = 0
+         state.musicPdfUrl = ""
          state.partXmlIndex = 0
          document.querySelector(".musicList-container")?.scroll(0, 0)
          state.page = 1
@@ -764,7 +761,11 @@ export default defineComponent({
          state.selectedPartName = defaultShowStaff?.instrumentName
          state.selectedTrack = defaultShowStaff?.track
          state.partXmlIndex = defaultShowStaff?.xmlIndex
-         state.musicPdfUrl = defaultShowStaff?.musicPdfUrl || ""
+         if (row.isComberRender) {
+            state.musicPdfUrl = row?.musicPdfUrl || ""
+         } else {
+            state.musicPdfUrl = defaultShowStaff?.musicPdfUrl || ""
+         }
       }
 
       const getPartNames = async (xmlUrl: string) => {
@@ -818,7 +819,7 @@ export default defineComponent({
       const renderStaff = async () => {
          try {
             if (state.musicPdfUrl) {
-               state.iframeSrc = "/pdf/web/viewer.html?file=" + encodeURIComponent(state.musicPdfUrl)
+               state.iframeSrc = "/pdf/web/viewer.html?file=" + encodeURIComponent(state.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
@@ -946,15 +947,15 @@ export default defineComponent({
       }
 
       const searchContent = async () => {
-         const status = state.musicPdfUrl ? true : false
+         // const status = state.musicPdfUrl ? true : false
          await toDetail()
          if (activeItem.value?.id) {
             if (state.musicPdfUrl) {
                staffLoading.value = true
                renderStaff()
             } else {
-               if (status) {
-                  state.musicPdfUrl = ""
+               // 为了处理，之前是使用pdf渲染，现在又用osmd，iframe没有重新加载
+               if (state.iframeSrc.indexOf("pdf/web") !== -1) {
                   renderStaff()
                } else {
                   resetRender()
@@ -1296,7 +1297,6 @@ export default defineComponent({
                            v-model:value={state.selectedPartIndex}
                            scrollable
                            onUpdate:value={async (value: any) => {
-                              console.log(value, "value")
                               const item = partColumns.value.find((item: any) => item.value === value)
                               state.selectedPartIndex = value
                               state.selectedPartName = item.instrumentName

src/views/cloudPractice/formatSvgToImg.ts

@@ -37,12 +37,40 @@ const blobToBase64 = (blob: any) => {
    })
 }
 
+// export const svgtopng = async (svg: any, width: any, height: any) => {
+//    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//    // @ts-ignore
+//    const canvas = new OffscreenCanvas(width, height)
+//    const ctx = canvas.getContext("2d")!
+//    const v = await Canvg.fromString(ctx!, svg, preset)
+
+//    /**
+//     * Resize SVG to fit in given size.
+//     * @param width
+//     * @param height
+//     * @param preserveAspectRatio
+//     */
+//    v.resize(width * 2, height * 2, "xMidYMid meet")
+
+//    // Render only first frame, ignoring animations and mouse.
+//    await v.start()
+//    const blob = await canvas.convertToBlob()
+//    const base64 = await blobToBase64(blob)
+//    return base64
+// }
+
+let canvas = null as any
 export const svgtopng = async (svg: any, width: any, height: any) => {
-   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-   // @ts-ignore
-   const canvas = new OffscreenCanvas(width, height)
+   // console.log(canvas, +new Date() + '-----')
+
+   if (!canvas) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      canvas = new OffscreenCanvas(width, height)
+   }
+
    const ctx = canvas.getContext("2d")!
-   const v = await Canvg.fromString(ctx!, svg, preset)
+   let v: any = await Canvg.fromString(ctx!, svg, preset)
 
    /**
     * Resize SVG to fit in given size.
@@ -56,5 +84,8 @@ export const svgtopng = async (svg: any, width: any, height: any) => {
    await v.start()
    const blob = await canvas.convertToBlob()
    const base64 = await blobToBase64(blob)
+   ctx.clearRect(0, 0, canvas.width, canvas.height)
+   await v.stop()
+   v = null
    return base64
 }