js 自制解碼.rpgsave存檔的網頁

jkdgvse發表於2020-12-12
JS網頁

1. 桌面右鍵，新建文字文件，檔名任意，字尾改為.html

2. 文件右鍵，編輯，複製程式碼到文件裡

3. 雙擊開啟html頁面

 

直接下載

 

解碼rpgsave.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解碼rpgsave</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js" async></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js" async></script>
</head>
<body>
    <div id="app">
        <el-row :gutter="10">

            <el-col :xs="24" :sm="24" :md="10"  style="margin-top: 50px;">
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <!-- (1) 選取檔案 -->
                    <div>
                        <el-upload
                            class="upload-demo"
                            drag
                            :auto-upload="1==2"
                            :on-change="upload"
                            :on-preview="clickFile"
                            action="#"
                            >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">將檔案拖到此處，或<em>點選上傳</em></div>
                        </el-upload>
                    </div>

                    <!-- (2) 加密內容 -->
                    <div style="margin-top: 50px;">
                        <el-input v-model="加密內容" placeholder="未讀取檔案">
                            <template slot="prepend">原文：</template>
                            <el-button slot="append"  v-on:click="ctrl_c(加密內容)" icon="el-icon-document-copy"></el-button>
                        </el-input>
                    </div>

                    <!-- (3) 加密按鈕 -->
                    <div style="margin-top: 15px;">
                        <el-button v-on:click="encode_and_save" icon="el-icon-upload2"></el-button>
                    </div>

                    <!-- (4) 解密內容 -->
                    <div style="margin-top: 15px;">
                        <el-input v-model="解密內容" placeholder="請輸入內容">
                            <template slot="prepend">解碼：</template>
                            <el-button slot="append" v-on:click="ctrl_c(解密內容)" icon="el-icon-document-copy"></el-button>
                        </el-input>
                    </div>


                </div>
            </el-col>


            <el-col :xs="24" :sm="24" :md="13"  style="margin-top: 40px;">
                <div style="display: flex; flex-direction: column; align-items: center;">
                    <!-- (5) json內容 -->
                    <div style="margin-top: 15px; width: 90%;">
                        <el-input type="textarea" v-model="json內容" placeholder="請輸入內容" :rows="18">
                        </el-input>
                    </div>

                    <!-- (6) 轉換按鈕 -->
                    <div style="margin-top: 15px;">
                        <el-button v-on:click="change_and_encode_and_save"  type="primary"  icon="el-icon-check"></el-button>
                        <el-button v-on:click="ctrl_c(json內容)" icon="el-icon-document-copy"></el-button>
                    </div>
                </div>
            </el-col>

        </el-row>
    </div>


    <script>
        var app = new Vue({
            el: '#app',
            data: {
                加密內容: null,
                解密內容: null,
                json內容: null,
                檔案路徑: null
            },
            watch: {
                加密內容(新值, 舊值) {
                    this.解密內容 = this.讀取解密內容(this.加密內容)
                },
                解密內容(新值, 舊值) {
                    this.json內容 = this.讀取json內容(this.解密內容)
                }
            },
            methods: {
                // (1)
                upload: function (file, fileList) {
                    this.檔案路徑 = file.name
                    file.檔案路徑 =  this.檔案路徑
                    this.讀取加密內容(file.raw)
                },
                clickFile: function (file) {
                    this.讀取加密內容(file.raw)
                    this.檔案路徑 = file.檔案路徑 
                },

                // (2)
                讀取加密內容: function (file) {
                    var _this = this
                    var reader = new FileReader()
                    reader.readAsText(file)
                    reader.onload = function(){
                        _this.加密內容 = this.result
                    }
                },
                ctrl_c: function (text) {
                    this.copyText(text)
                },

                // (3)
                encode_and_save: function () {
                    this.加密內容 = this.encode(this.解密內容)
                    // this.save(this.加密內容)
                },

                // (4)
                讀取解密內容: function (加密內容) {
                    return LZString.decompressFromBase64(加密內容)
                },

                // (5)
                讀取json內容: function (解密內容) {
                    return JSON.stringify(JSON.parse(解密內容),null,2)
                },

                // (6)
                change_and_encode_and_save: function () {
                    let _ = this.change(this.json內容)
                    this.加密內容 = this.encode(_)
                    this.save(this.加密內容, this.檔案路徑)
                },



                // ------------ 工具方法 ------------

                change: function (text) {
                    return JSON.stringify(JSON.parse(text))
                },
                encode: function (text) {
                    return LZString.compressToBase64(text)
                },
                save: function (text, 檔名 = "a1.txt") {
                    let pos = 檔名.lastIndexOf("/")
                    檔名 = 檔名.substring(pos+1)
                    console.log(檔名)
                    var file = new File([text], 檔名, { type: "text/plain;charset=utf-8" });
                    saveAs(file);
                },


                // 複製的方法
                copyText: function(text, callback){ // text: 要複製的內容， callback: 回撥
                    var tag = document.createElement('input');
                    tag.setAttribute('id', 'cp_hgz_input');
                    tag.value = text;
                    document.getElementsByTagName('body')[0].appendChild(tag);
                    document.getElementById('cp_hgz_input').select();
                    document.execCommand('copy');
                    document.getElementById('cp_hgz_input').remove();
                    if(callback) {callback(text)}
                }
            }
        })
    </script>
</body>
</html>

 

相關文章