v0.3.0 - fix Download PDF button - close #2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "musescore-downloader",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "download sheet music from musescore.com for free, no login or Musescore Pro required | 免登录、免 Musescore Pro，免费下载 musescore.com 上的曲谱",
   "main": "dist/main.js",
   "repository": {
@@ -13,8 +13,19 @@
     "url": "https://github.com/Xmader/musescore-downloader/issues"
   },
   "homepage": "https://github.com/Xmader/musescore-downloader#readme",
+  "dependencies": {
+    "iconv-lite": "^0.5.0",
+    "pdfkit": "^0.10.0",
+    "pdfmake": "^0.1.62"
+  },
   "devDependencies": {
+    "@rollup/plugin-json": "^4.0.0",
+    "@types/pdfkit": "^0.10.4",
+    "@types/pdfmake": "^0.1.8",
     "rollup": "^1.26.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript": "^1.0.1",
     "tslib": "^1.10.0",
     "typescript": "^3.6.4"

rollup.config.js

@@ -1,4 +1,8 @@
 import typescript from "rollup-plugin-typescript"
+import resolve from "rollup-plugin-node-resolve"
+import commonjs from "rollup-plugin-commonjs"
+import builtins from "rollup-plugin-node-builtins"
+import json from "@rollup/plugin-json"
 import fs from "fs"
 
 const getBannerText = () => {
@@ -26,5 +30,15 @@ export default {
                 "dom"
             ],
         }),
+        resolve({
+            preferBuiltins: true,
+            jsnext: true,
+            extensions: [".js", ".ts"]
+        }),
+        commonjs({
+            extensions: [".js", ".ts"]
+        }),
+        json(),
+        builtins(),
     ]
 }

src/main.ts

@@ -3,6 +3,62 @@ import "./meta"
 import { ScorePlayerData } from "./types"
 import { waitForDocumentLoaded } from "./utils"
 
+import pdfmake from "pdfmake/build/pdfmake"
+
+const generatePDF = (name?: string) => {
+    const scoreImgs: NodeListOf<HTMLImageElement> = document.querySelectorAll("img[id^=score_]")
+
+    const { naturalWidth: width, naturalHeight: height } = scoreImgs[0]
+
+    const canvas = document.createElement("canvas")
+    const canvasContext = canvas.getContext("2d")
+
+    canvas.width = width
+    canvas.height = height
+    canvas.style.display = "none"
+
+    document.body.appendChild(canvas)
+
+    const imgDataList = [...scoreImgs].map((i) => {
+        canvasContext.clearRect(0, 0, width, height)
+        canvasContext.drawImage(i, 0, 0)
+        return canvas.toDataURL("image/png")
+    })
+
+    const pdf = pdfmake.createPdf({
+        pageMargins: 0,
+        // @ts-ignore
+        pageOrientation: "PORTRAIT",
+        pageSize: { width, height },
+        // compress: true,
+        content: [
+            ...imgDataList.map((data) => {
+                return {
+                    image: data,
+                    width,
+                    height,
+                }
+            })
+        ]
+    })
+
+    return new Promise((resolve) => {
+        pdf.download(`${name}.pdf`, resolve)
+    })
+}
+
+const getTitle = (scorePlayerData: ScorePlayerData) => {
+    try {
+        return scorePlayerData.json.metadata.title
+    } catch (_) {
+        return ""
+    }
+}
+
+const getScoreFileName = (scorePlayerData: ScorePlayerData) => {
+    return getTitle(scorePlayerData).replace(/\W+/g, "_")
+}
+
 const main = () => {
 
     // @ts-ignore
@@ -19,7 +75,6 @@ const main = () => {
     // https://github.com/Xmader/cloudflare-worker-musescore-mscz
     const msczURL = `https://musescore-mscz.99.workers.dev/${id}`
 
-    const pdfURL = baseURL + "score_full.pdf"
     const mxlURL = baseURL + "score.mxl"
     const { midi: midiURL, mp3: mp3URL } = scorePlayer.urls
 
@@ -29,19 +84,14 @@ const main = () => {
 
     const downloadURLs = {
         "Musescore": msczURL,
-        "PDF": pdfURL,
+        "PDF": null,
         "MusicXML": mxlURL,
         "MIDI": midiURL,
         "MP3": mp3URL,
     }
 
-    const newDownloadBtns = Object.keys(downloadURLs).map((name) => {
-        const url = downloadURLs[name]
-
+    const createBtn = (name: string) => {
         const btn = downloadBtn.cloneNode(true) as HTMLElement
-        btn.onclick = () => {
-            window.open(url)
-        }
 
         if (btn.nodeName.toLowerCase() == "button") {
             btn.setAttribute("style", "width: 205px !important")
@@ -49,10 +99,35 @@ const main = () => {
             btn.dataset.target = ""
         }
 
-        const span = [...btn.childNodes].find((x) => {
-            return x.textContent.includes("Download")
+        const textNode = [...btn.childNodes].find((x) => {
+            return x.nodeName.toLowerCase() == "#text"
+                && x.textContent.includes("Download")
         })
-        span.textContent = `Download ${name}`
+        textNode.textContent = `Download ${name}`
+
+        return {
+            btn,
+            textNode,
+        }
+    }
+
+    const newDownloadBtns = Object.keys(downloadURLs).map((name) => {
+        const url = downloadURLs[name]
+        const { btn, textNode } = createBtn(name)
+
+        if (name !== "PDF") {
+            btn.onclick = () => {
+                window.open(url)
+            }
+        } else {
+            btn.onclick = () => {
+                const text = textNode.textContent
+                textNode.textContent = "Processing…"
+                generatePDF(getScoreFileName(scorePlayer)).then(() => {
+                    textNode.textContent = text
+                })
+            }
+        }
 
         return btn
     })