Musescore Downloader

download pdf or print any sheets!

当前为 2022-10-19 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Musescore Downloader
// @version      1.1
// @description  download pdf or print any sheets!
// @author       Charlie
// @match        https://musescore.com/*
// @namespace    https://greasyfork.org/users/890174
// @grant        GM_addStyle
// ==/UserScript==

setTimeout(() => {
    "use strict"
    GM_addStyle(`
header > *:not(nav),
.hFMfR > .AFyen,
.YaB2I > section :nth-last-child(n+2),
aside > div:nth-last-child(2),
aside > div:nth-child(2),
aside > div:nth-child(3),
#jmuse-scroller-component div:not(.BmIOX),
footer, ._9aj2, .p6izg, .TnQwe, .U8wvj, .jxGLy, .YRlfn, .YMprF, .MXIPY {
	display: none !important;
}
.hFMfR {
	left: unset !important;
	right: 36px !important;
}
.dXt6a {
	background-color: #e1effe !important;
	padding: .3em .8em !important;
	border-left: 5px solid #1a4f9f !important;
	font-size: 14px !important;
}
.ZvxB2, .AJXCt {
	background-color: #e1effe7c !important;
	padding: .6em .8em !important;
	border-radius: 4px !important;
	outline: 1.5px solid #1a4f9f !important;
    flex-direction: column !important;
}
aside a {
	padding: 0 .3em !important;
	transition: background-color ease-out .15s !important;
}
aside a:hover {
	background-color: #45f !important;
	color: #f3f3ff !important;
}
aside > div:nth-child(5) {
	border: none !important;
}
aside > div:nth-child(4),
aside > div:nth-child(5) {
	padding: 12px 20px !important;
}
aside > div:nth-child(4) > div {
	display: flex !important;
	place-items: center !important;
}
aside > div:nth-child(4) > div > .Pl3iC {
	margin-right: 16px !important;
}
aside table {
	background-color: #e1effe7c !important;
	padding: .3em .6em !important;
	border-radius: 3px !important;
	outline: 1.5px solid #1a4f9f !important;
}
aside table tr {
	padding-bottom: 5px !important;
}
.a0naR,
.Au_pg,
.Al3lQ {
	height: 32px !important;
	width: 32px !important;
	color: transparent !important;
	border-radius: 5px !important;
}
.hyzNL {
	max-height: unset !important;
}
.dXt6a section {
	margin: 0 !important;
}`)

    const ZH = navigator.language == "zh-CN"

    async function download() {
        const Window = window.open()
        const id = location.pathname.match(/\/[^\/]*$/)[0].slice(1)
        const length = document.getElementsByClassName("BmIOX").length
        Window.document.write(`
<!DOCTYPE html>
<head>
<title>${document.getElementsByTagName('h1')[0].innerText}</title>
<style>
    body {
        margin: 0;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        place-items: center;
        justify-content: center;
        color: rgb(49, 63, 78);
        background-color: rgb(237, 242, 247);
        transform-origin: top;
        transition: background-color ease .3s;
        will-change: background-color;
        overflow-x: scroll;
    }

    svg {
        width: 100vw;
        height: auto;
        display: block;
        margin: auto;
    }

    .card {
        display: flex;
        text-align: center;
        place-items: center;
        font-size: 1.2em;
        width: ${ ZH ? 360 : 480 }px;
        box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.07);
        padding: 1.5em 2em;
        background-color: rgb(255, 255, 255);
        border-radius: 8px;
        transition: all ease-out .3s;
        animation: card-intro .8s ease-out;
        overflow: hidden;
        white-space: nowrap;
    }

    @keyframes card-intro {
        from {
            box-shadow: 10px 10px 2px rgba(0, 0, 0, 0.03);
            width: 0;
            opacity: 0.6;
        }
        to {
            box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.07);
            opacity: 1;
        }
    }

    .card-icon {
        display: flex;
        flex-direction: column;
        place-items: center;
        margin-right: 3em;
        font-weight: bold;
    }

    .card-text {
        flex: 1;
    }

    b {
        color: rgb(49, 140, 252);
    }

    .spinner, .spinner * { box-sizing: border-box; }
    .spinner {
      height: 40px;
      width: 40px;
      top: calc( -10px * 2 / 3);
      margin-left: calc(10px / 3);
      margin-bottom: calc(10px / 3);
    }
    .spinner .sq {
      height: 10px;
      width: 10px;
      top: calc( -10px * 2 / 3);
      margin-right: calc(10px / 3);
      margin-top: calc(10px / 3);
      background: rgb(49, 140, 252);
      float: left;
      position: relative;
      opacity: 0;
      animation: spinner 6s infinite;
    }
    ${Array(9).fill().map((_, i) => `.spinner .sq:nth-child(${i+1}) { animation-delay: calc(300ms * ${8-i}); }`).join("\n")}
    .spinner .clear { clear: both; }
    @keyframes spinner {
      0% { opacity: 0; }
      5% { opacity: 1; top: 0; }
      50.9% { opacity: 1; top: 0; }
      55.9% { opacity: 0; top: inherit; }
    }

    @media print {
        @page {
            margin: 0;
        }
        button {
            display: none;
        }
        svg {
            width: 21cm;
            height: 29.7cm;
        }
    }

    .btn-group {
        position: fixed;
        left: 32px;
        top: 24px;
    }
    button {
        font-size: 1.4em;
        font-weight: bold;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.1);
        padding: .4em ${ ZH ? 1.5 : 0.8 }em;
        margin-right: 1.2em;
        background-color: rgb(255, 255, 255);
        color: rgb(49, 63, 78);
        border-radius: 4px;
        cursor: pointer;
        outline: 1.5px solid rgb(49, 63, 78);
        border: none;
        transition: all ease-out .2s;
    }
    button:hover {
        background-color: rgb(235, 235, 235);
    }
    button:active {
        outline-color: black;
        transform: scale(0.97);
    }

    .hint {
        margin: 1em 0;
        color: #a7b2be;
    }
</style>
</head>
<body>
<div class="card">
    <div class="card-icon">
        <div class="spinner">
            <div class="sq"></div>
            <div class="sq"></div>
            <div class="sq"></div>
            <div class="sq clear"></div>
            <div class="sq"></div>
            <div class="sq"></div>
            <div class="sq clear"></div>
            <div class="sq"></div>
            <div class="sq"></div>
        </div>
        <div class="card-icon-text">${ ZH ? "下载中" : "Downloading" }</div>
    </div>
        <div class="card-text">
            ${ ZH ? `已下载 <b id="download-status">0</b> 页,共 <b>${length}</b> 页`
                  : `<b id="download-status">0</b> page(s) loaded, <b>${length}</b> total` }
        </div>
    </div>
    <span class="hint">${ ZH ? "点击左上方的 <b>打印</b> 按钮,选择 <b>另存为PDF</b> 即可下载乐谱。" : "To download the sheet, click <b>PRINT</b> button on the top left then select <b>Export PDF</b>." }</span>
</body>`)
        let data = Array(length).fill(""), cnt = 0

        async function getData() {
            return Promise.all(
                data.filter(e => e.length == 0).map((_, i) => new Promise(async (res, rej) => {
                    let url = await fetch(`https://musescore.com/api/jmuse?id=${id}&type=img&v2=1&index=${i}`, {
                        headers: { authorization: "8c022bdef45341074ce876ae57a48f64b86cdcf5" }
                    }).then(e => e.json()).then(e => e.info.url).catch(rej)
                    data[i] = await fetch(url).then(e => e.text()).catch(rej)
                    console.log(i, data[i])
                    Window.document.getElementById("download-status").innerText = ++cnt
                    res()
                }))
            ).catch((err) => console.error(err))
        }
        await getData()

        setTimeout(async () => {
            if(cnt != length) {
                Window.document.getElementsByClassName("card-text")[0].innerText = ZH ? "下载失败,请稍后再试。" : "Download failed, try again later."
                return
            }
            setTimeout(() => {
                Window.document.body.style.background = "white"
                Window.document.body.innerHTML = data.join("") + `<div class="btn-group"><button onclick="print()">${ ZH ? "打印" : "PRINT" }</button>`
                const svgs = [...Window.document.getElementsByTagName("svg")]
                svgs.forEach((e) => e.setAttribute("viewBox", `0 0 ${e.width.baseVal.value} ${e.height.baseVal.value}`))
                Window.scrollTo(0, 0)
            }, 400)
        }, 800)
    }

    const btns = [...document.getElementsByTagName("button")]
    btns.filter(el => {
        const val = el.attributes.getNamedItem("name")?.value
        return val == "download" || val == "print"
    }).forEach(el => {
        const type = el.attributes.getNamedItem("name").value
        const fakeEl = el.cloneNode(true)
        fakeEl.style.border = "2px #0dbc79 solid"
        if(type == "download") fakeEl.style.background = "#0dbc79"
        fakeEl.onclick = download
        el.parentNode.replaceChild(fakeEl, el)
    })
}, 500)