官网 除了占位图

1

src/helpers/imageFunction.ts

@@ -0,0 +1,64 @@
+export const imgToCanvas = async (url: string) => {
+  const img = document.createElement('img')
+
+  img.src = url
+
+  img.setAttribute('crossOrigin', 'anonymous') // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
+
+  await new Promise(resolve => (img.onload = resolve))
+
+  // 创建canvas DOM元素，并设置其宽高和图片一样
+
+  const canvas = document.createElement('canvas')
+  canvas.width = img.width
+  canvas.height = img.height
+  // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
+  let ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+
+  ctx.fillStyle = 'rgb(255, 255, 255)'
+  ctx.fillStyle = '#fff'
+  ctx.fillRect(0, 0, img.width, img.height)
+  ctx.drawImage(img, 0, 0)
+  return canvas
+}
+
+/* canvas添加水印
+
+* @param {canvas对象} canvas
+
+* @param {水印文字} text
+
+*/
+
+export const addWatermark = (canvas, text) => {
+  const ctx = canvas.getContext('2d')
+  // ctx.fillStyle = '#fff'
+
+  const water = document.createElement('canvas')
+  // 小水印画布大小
+  water.width = 300
+  water.height = 100
+
+  // 第一层
+  const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
+  waterCtx.clearRect(0, 0, water.width, water.height)
+  // 小水印中文字偏转角度
+  waterCtx.rotate((-25 * Math.PI) / 180)
+  // waterCtx.translate(-30, -30)
+  waterCtx.font = '25pt Calibri' // 水印文字添加
+  waterCtx.fillStyle = 'rgba(149,155,170,0.2)'
+  waterCtx.fillText('酷乐秀', 15,120)
+  const pat = ctx.createPattern(water, 'repeat')
+  ctx.fillStyle = pat
+  ctx.fillRect(0, 0, canvas.width, canvas.height)
+  return canvas
+}
+
+export const convasToImg = canvas => {
+  // var image = new Image()
+  // canvas.toDataURL 返回的是一串Base64编码的URL
+  // 指定格式 PNG
+  // image.src = canvas.toDataURL('image/png')
+
+  return canvas.toDataURL('image/png')
+}

src/helpers/utils.ts

@@ -125,3 +125,23 @@ export const dateFormat = (
 ) => {
   return dayjs(value).format(format)
 }
+
+
+export function vaildTeachingUrl() {
+  let url = window.location.href
+  let returnUrl = ''
+  if (/online/.test(url)) {
+    //线上
+    returnUrl = '//dev.colexiu.com'
+  } else if (/dev/.test(url)) {
+    // dev 环境
+    returnUrl = '//dev.colexiu.com'
+  } else if (/test/.test(url)) {
+    // dev 环境
+    returnUrl = '//dev.colexiu.com'
+  } else {
+    // 默认dev环境
+    returnUrl = '//dev.colexiu.com'
+  }
+  return returnUrl
+}

src/views/muiscDetial/index.tsx

@@ -1,4 +1,12 @@
-import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+import {
+  defineComponent,
+  toRefs,
+  reactive,
+  onMounted,
+  ref,
+  watch,
+  nextTick
+} from 'vue'
 import classes from './index.module.less'
 import { ElButton, ElOption, ElSelect } from 'element-plus'
 import printIcon from './images/printIcon.png'
@@ -14,8 +22,10 @@ import code from './images/code.png'
 import musicItem from './modals/musicItem'
 import request from '@/helpers/request'
 import { useRoute } from 'vue-router'
-import { getUserType } from '@/helpers/utils'
+import { getUserType, vaildTeachingUrl } from '@/helpers/utils'
+import { imgToCanvas, addWatermark, convasToImg } from '@/helpers/imageFunction'
 import printJS from 'print-js'
+
 export default defineComponent({
   name: 'muiscDetial',
   props: {
@@ -43,7 +53,10 @@ export default defineComponent({
       mp3Type: '',
       activeRow: {} as any,
       showCode: false,
-      userType: ''
+      userType: '',
+      accompanyUrl: '',
+      imgData: '',
+      imgUrl:''
     })
     const print = ref()
     const getMusicList = async () => {
@@ -60,6 +73,7 @@ export default defineComponent({
         state.activeRow = res.data.background[0]
         state.subjectId = res.data.background[0].id
         state.teacherDetail = res.data.teacher
+        setAccompanyUrl()
       } catch (e) {
         console.log(e)
       }
@@ -82,22 +96,84 @@ export default defineComponent({
       state.id = val as string
       getMusicList()
     }
+    watch(
+      () => state.accompanyUrl,
+      accompanyUrl => {
+        state.accompanyUrl = accompanyUrl
+      }
+    )
+    const setAccompanyUrl = () => {
+      let url = vaildTeachingUrl()
+      // state.accompanyUrl =
+      //   url +
+      //   `/accompany/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
+      state.accompanyUrl = `http://192.168.3.8:3000/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
+
+      // var iframe = document.getElementById('containerPrint') as any //获取id为svgframe的iframe对象
+      // if (iframe.attachEvent) {
+      //   iframe.attachEvent('onload', function () {
+      //   })
+      // } else {
+      //   iframe.onload = function () {
+      //     //这里获取svgDom
+      //     console.log(iframe.contentWindow)
+      //     var iframeSvg = document.getElementById('osmdSvgPage1')
+      //     console.log(iframeSvg)
+      //     //接下来就可以对svgDom进行操作，绑定元素点击事件，改变元素的属性等等
+      //     //给svg上id为‘VKnife1’的元素绑定点击事件
+
+      //   }
+      // }
+
+      // document.getElementById('containerPrint').onload = function () {
+      //   console.log(print)
+      // }
+    }
+    const setSvg = (val: any) => {
+      console.log(val)
+    }
     onMounted(() => {
+      // window.setSvg = (val)=>{
+      //   setSvg(val)
+      // }
+      window.addEventListener(
+        'message',
+        e => {
+          console.log(e)
+          state.imgData = e.data
+          // printHander()
+          // alert(e.data);
+        },
+        false
+      )
       state.userType = getUserType()
       state.showCode = state.userType == 'STUDENT' ? true : false
+      // 拼链接
       getMusicList()
     })
-    const printHander = () => {
-      printJS({
-        printable: 'containerPrint', // 元素id,不支持多个
-        type: 'html',
-        targetStyle: ['* '],
-        targetStyles: ['*'],
-        maxWidth: '', // 最大宽度，默认800,仅支持数字
-        style:
-          '@page{size:auto; margin: 0;}' +
-          '@media print { @page {size: landscape } }' // landscape  默认横向打印
-      } as any)
+    const printHander = async () => {
+      const tempCanvas = await imgToCanvas(state.imgData)
+      const canvas = addWatermark(tempCanvas, '酷乐秀')
+      const imgUrl = convasToImg(canvas)
+      const link = document.createElement('a')
+      link.setAttribute('download', state.musicDetail.musicSheetName)
+
+      // 添加时间戳，防止浏览器缓存图片
+      state.imgUrl = imgUrl
+      // return
+      link.href = imgUrl
+      link.click()
+      // printJS({
+      //   printable: imgUrl, // 元素id,不支持多个
+      //   type: 'image',
+      //   targetStyle: ['* '],
+      //   targetStyles: ['*'],
+      //   maxWidth: '', // 最大宽度，默认800,仅支持数字
+      //   style:
+      //     '@page{size:auto; margin: 0;}'
+
+      // } as any)
+      //  '@media print { @page {size: landscape } }' // landscape  默认横向打印
     }
     return () => (
       <>
@@ -111,6 +187,9 @@ export default defineComponent({
                   class="w-full subjectChiose"
                   v-model={state.subjectId}
                   placeholder="请选择声部"
+                  onChange={() => {
+                    setAccompanyUrl()
+                  }}
                 >
                   {state.subjectList.map((item: any) => (
                     <ElOption
@@ -121,13 +200,19 @@ export default defineComponent({
                   ))}
                 </ElSelect>
               </div>
-              <div class={classes.titleRight}  onClick={() => printHander()}>
+              <div class={classes.titleRight} onClick={() => printHander()}>
                 <img src={printIcon} alt="" />
-                <p>打印乐谱</p>
+                <p>下载乐谱</p>
               </div>
             </div>
-            <div class={classes.musicContent} id='containerPrint' ref="print">
-              123
+            <div class={classes.musicContent}>
+              {/*        id="iframe"       ref="iframe"*/}
+              <iframe
+                id="containerPrint"
+                ref="print"
+                style="width: 100%;height:750px;page-break-after:always;"
+                src={state.accompanyUrl}
+              />
             </div>
             {state.showCode ? (
               <div class={classes.showCode}>

src/views/musicLibrary/index.module.less

@@ -11,6 +11,21 @@
 .w1200 {
   width: 1200px !important;
   margin: 0 auto;
+  :global {
+    .el-tabs__item {
+      font-size: 22px;
+      margin-bottom: 14px;
+    }
+    .el-tabs__active-bar {
+      height: 6px;
+      background: #2dc7aa;
+      border-radius: 3px;
+    }
+    .el-tabs__header {
+      margin: 0!important;
+    }
+  }
+
 }
 .section {
   .hotAlbum {
@@ -87,17 +102,3 @@
   margin-top: 28px;
   font-size: 20px;
 }
-:global {
-  .el-tabs__item {
-    font-size: 22px;
-    margin-bottom: 14px;
-  }
-  .el-tabs__active-bar {
-    height: 6px;
-    background: #2dc7aa;
-    border-radius: 3px;
-  }
-  .el-tabs__header {
-    margin: 0!important;
-  }
-}