合同模板動(dòng)態(tài)生成水印的優(yōu)化歷程

由于三方的報(bào)表軟件做報(bào)表不錯(cuò)，可要做合同模板的有些功能實(shí)現(xiàn)不了关翎。故用前端畫(huà)html實(shí)現(xiàn)合同模板頁(yè)面负拟，一開(kāi)始合同模板編輯后打印，用的瀏覽器的打印功能脚仔，后續(xù)因?yàn)殡娮雍灳鸵肓巳絟tml轉(zhuǎn)pdf的工具wkhtmltopdf勤众。合同水印就需要同時(shí)兼容chrome瀏覽器打印和工具wkhtmltopdf轉(zhuǎn)pdf后打印的效果。

各方案比較

方案	支持動(dòng)態(tài)生成水印	chrome瀏覽器打印	wkhtmltopdf工具打印
第一階段	?	?	×
第二階段	×	?	?
第三階段svg	?	?	×
第三階段canvas $\color{red}{推薦}$	?	?	?

*個(gè)人推薦：如果你沒(méi)用wkhtmltopdf工具玻侥，選第三種决摧、第四種都行；用了wkhtmltopdf工具凑兰，選第四種掌桩。

注：wkhtmltopdf由于最后的版本是2000年左右，之后好像沒(méi)維護(hù)了姑食。它內(nèi)置的瀏覽器對(duì)es6及以上版本的js支持性比較差波岛，盡量別用，不然會(huì)出現(xiàn)各種狀況音半。

第一階段：js動(dòng)態(tài)添加多個(gè)文本標(biāo)簽

功能需求： 根據(jù)合同狀態(tài)（合同草稿则拷、已簽約、已備案等等）生成對(duì)應(yīng)的水印曹鸠。
大體實(shí)現(xiàn)思路：根據(jù)頁(yè)面的內(nèi)容的寬高煌茬，每個(gè)水印的大小來(lái)動(dòng)態(tài)生成一組水印標(biāo)簽，動(dòng)態(tài)遍歷添加到body里彻桃，通過(guò)樣式的positon:absolute坛善；控制每個(gè)水印標(biāo)簽位置。
代碼參考：代碼比較多邻眷，并且網(wǎng)上類(lèi)似思路的文章不少眠屎，給個(gè)類(lèi)似思路的參考鏈接：http://t.zoukankan.com/GongQi-p-4074609.html。
缺點(diǎn)： 在兩種打印模式（chrome瀏覽器打印肆饶、工具wkhtmltopdf轉(zhuǎn)pdf打痈鸟谩）中，任何一個(gè)合同都會(huì)有強(qiáng)制分頁(yè)的情況（比如驯镊，合同封面葫督、附件的每個(gè)附件單獨(dú)提頁(yè)等等）竭鞍，而一旦出現(xiàn)強(qiáng)制分頁(yè)時(shí)，無(wú)論怎么獲取合同頁(yè)面的寬高都無(wú)法做到和打印頁(yè)時(shí)一樣的總高候衍，導(dǎo)致最后幾個(gè)打印頁(yè)內(nèi)容無(wú)合同水印笼蛛，甚至水印重疊的問(wèn)題。

第二階段：純css實(shí)現(xiàn)蛉鹿，`background-repeat: repeat;`實(shí)現(xiàn)多個(gè)水印

功能需求： 根據(jù)合同狀態(tài)（合同草稿滨砍、已簽約、已備案等等）生成對(duì)應(yīng)的水印妖异。（和第一階段一致）
大體實(shí)現(xiàn)思路： 將所有可能的合同狀態(tài)的水印枚舉出來(lái)（合同草稿惋戏、已備案、已簽約）他膳，然后讓ui按指定尺寸設(shè)計(jì)成圖片响逢，然后將圖片轉(zhuǎn)成對(duì)應(yīng)的base64碼值，添加到樣式里棕孙，用background-repeat: repeat;實(shí)現(xiàn)多個(gè)水印舔亭。
代碼參考： 核心代碼如下：

    /*水印*/
    .watermark{
        display: none;
        position: fixed;
        z-index: -1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-repeat: repeat;
        background-position: 0 0;
        background-size: 220px 220px;
    }  
    /*合同草稿*/
    .watermark.water-draft{
        display: block;
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQBAMAAABykSv/AAA9EWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAyMDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgICAgICAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgICAgICAgICB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXA6Q3JlYXRlRGF0ZT4yMDE5LTExLTA3VDE3OjAzOjE1KzA4OjAwPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNZXRhZGF0YURhdGU+MjAxOS0xMS0wN1QxNzowMzoxNSswODowMDwveG1wOk1ldGFkYXRhRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTktMTEtMDdUMTc6MDM6MTUrMDg6MDA8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8eG1wTU06SW5zdGFuY2VJRD54bXAuaWlkOmI1MDljMGE3LWNjOTYtYTY0ZC1iZTU2LTdiYTMxMjBhM2U3MjwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDpmODFhNzgzYi0wOWQ5LWM4NDUtYWMyOS0xNGJlYjExMjY3NWI8L3htcE1NOkRvY3VtZW50SUQ+CiAgICAgICAgIDx4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ+eG1wLmRpZDpmODFhNzgzYi0wOWQ5LWM4NDUtYWMyOS0xNGJlYjExMjY3NWI8L3htcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkhpc3Rvcnk+CiAgICAgICAgICAgIDxyZGY6U2VxPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmFjdGlvbj5jcmVhdGVkPC9zdEV2dDphY3Rpb24+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDppbnN0YW5jZUlEPnhtcC5paWQ6ZjgxYTc4M2ItMDlkOS1jODQ1LWFjMjktMTRiZWIxMTI2NzViPC9zdEV2dDppbnN0YW5jZUlEPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6d2hlbj4yMDE5LTExLTA3VDE3OjAzOjE1KzA4OjAwPC9zdEV2dDp3aGVuPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6c29mdHdhcmVBZ2VudD5BZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpPC9zdEV2dDpzb2Z0d2FyZUFnZW50PgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDphY3Rpb24+c2F2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDpiNTA5YzBhNy1jYzk2LWE2NGQtYmU1Ni03YmEzMTIwYTNlNzI8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTktMTEtMDdUMTc6MDM6MTUrMDg6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cyk8L3N0RXZ0OnNvZnR3YXJlQWdlbnQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpjaGFuZ2VkPi88L3N0RXZ0OmNoYW5nZWQ+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpTZXE+CiAgICAgICAgIDwveG1wTU06SGlzdG9yeT4KICAgICAgICAgPHBob3Rvc2hvcDpUZXh0TGF5ZXJzPgogICAgICAgICAgICA8cmRmOkJhZz4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxwaG90b3Nob3A6TGF5ZXJOYW1lPuWQiOWQjOiNieeovzwvcGhvdG9zaG9wOkxheWVyTmFtZT4KICAgICAgICAgICAgICAgICAgPHBob3Rvc2hvcDpMYXllclRleHQ+5ZCI5ZCM6I2J56i/PC9waG90b3Nob3A6TGF5ZXJUZXh0PgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxwaG90b3Nob3A6TGF5ZXJOYW1lPuW3suWkh+ahiDwvcGhvdG9zaG9wOkxheWVyTmFtZT4KICAgICAgICAgICAgICAgICAgPHBob3Rvc2hvcDpMYXllclRleHQ+5bey5aSH5qGIPC9waG90b3Nob3A6TGF5ZXJUZXh0PgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgICAgPHJkZjpsaSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgICAgICAgIDxwaG90b3Nob3A6TGF5ZXJOYW1lPuW3sue9keetvjwvcGhvdG9zaG9wOkxheWVyTmFtZT4KICAgICAgICAgICAgICAgICAgPHBob3Rvc2hvcDpMYXllclRleHQ+5bey572R562+PC9waG90b3Nob3A6TGF5ZXJUZXh0PgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgPC9yZGY6QmFnPgogICAgICAgICA8L3Bob3Rvc2hvcDpUZXh0TGF5ZXJzPgogICAgICAgICA8cGhvdG9zaG9wOkNvbG9yTW9kZT4zPC9waG90b3Nob3A6Q29sb3JNb2RlPgogICAgICAgICA8cGhvdG9zaG9wOklDQ1Byb2ZpbGU+c1JHQiBJRUM2MTk2Ni0yLjE8L3Bob3Rvc2hvcDpJQ0NQcm9maWxlPgogICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3BuZzwvZGM6Zm9ybWF0PgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpYUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjcyMDAwMC8xMDAwMDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj40MDA8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+NDAwPC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgCjw/eHBhY2tldCBlbmQ9InciPz5ljlyFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFVBMVEX////d3d35+fnz8/Pg4ODq6url5eW9fZpgAAAF10lEQVR42uzdvXacSBCG4XIjiPWpgRhZY8Vg2Y4F2uMY7F3H07I9938Je4ACGqwL2G+23kQcReBniubnaCyWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmWZVmW9b/tUyVXUYJOrqIGeXUdIHog/CDoDOS/0vtrAWm/TSCPQl4KBKBz7Zl/zkeQE0qhzrXABAJwk2QLCMhJPrQLCPDMTaIg9CTNDFIMAM6Od04SBenTaaOkB5F03jizg8gwb5RXAgIloQfhJHn4A4R0NQmvpwNIQUmSAB/b0SFfQeqGcUrugfI0OqBXEC8JI0kLFPNVY76AJEJIkukuBwALSKgJSRp94vAILCAZPB+Jw0gwFjYQYCIphKgTZpGLZBsIlKQSlnQ0OslwlrCBKElPNeoTSUAp2QrSAl64hmTA1NdprxeQMhlJ6A6kCKoiC8h5OpUBqIWmpMU5wzwnsp6y5Ibv5v0xFwkbiJdmnXd0wtSryL2uJcNytvoCfAt8T+ZVpPn9GUoCFJK0Xlj6KGM6EN3osZCgF0lrmkHXz46etTCmJKUw1czTnGEtX6ekJnzR5trxAKaKdCGpqUD0YuqEbhqTl8GLknjhabtOd39VKcbe16IkNCCuVxB9D+qWBXAmccLSqVAQbbnRFSVhybUICqI1exIaEGAPIu/ARqIgmECSTrQUuEQklXA0KEiTV9s5zAclIRqSdH5KnQALiQPKbCXhucqaRRpgJQlAvZB4qkUdeIAS6K/6haSiAoFvgI3EDbgTJSEDeQJiEjcUoiRMIMUwg0QE7pcwkbiXCaRPR5DXNiZIKn00T9EJT7qGAKXcY0/gAkq2RX36tx9wmIqMBwQRSBpNiXYRjsIRREmcaJVwlB1A8k8zSdMTvvqEX0D01U4hCQrhKsFYvYJUCYB+BFISukVdQaSZQQBPCOLfAEFPB9K+CVLQgRTZlYD0ciUgItcCktCDyEAPoqX8INowg6BaQUo2ECXpxWEUWUCAnzEI3cTnCqL1wpjuv4KADuT3jkRBWj6QG/Q7krvplJXygQQUO5JyXkPCuMkFggOJ3hiOnalAsCOZ6nUjpwI5kiiIkjCBHEkUpAVQcoHEJAqiJ66OCWTYkyiI/qUFEYhPDiQKIpJygdTS7Em2+5C/qUBE9iROQcZNLhA5kCiIRgRyqnckG4hwgbjWKwk7CKAk7CDAnZKwg6CXiCTjBSn2J65ADCIxySMxSBWTuJoWxH3dkfCCnHCOSXhBWpQLCTkIVhJyEGwk5CDAs5Jwg0QkNTVIu03JMzOIP20kXniadjsGqZ2SBK4h0d0OK4gem74NpSPJVhA9tlpF+EhWEP2pM0JGksvDAqI/9axFSLIHIVxH1uFOAaBaQAb9ZDGSDAA6BUkVhJYkr2aQk4LwkrzopDQKQkuyfKRcUBBWkvUjlSgIMUktGjmJl33Ma0kc9VpC2Yf6SNILT9Uq8QX1gaQQntLzwtEqwEZCBTKcJ4TPATNDTPIPEwjyy+USMPcsMQlVA+JuZUdCBbLrTmISXpCyFlaSAVHfq+PdO08NtrxobCQqUvy4XL4/rV8JQjol9zrgiX4V28uepKY7kGb5brw6JvFcIhFICx+T1FwHEoMgJvFcZ627GAQxSS1cIjGIkmhsIjEI4FkP5DYC4SUZgNsYpGUlCcBzBFJkrCQt8DMC6SWQkgBoIxARUhIHYAcijpMkAbADYSVJ9yD6K0KSmyOI3jPmQta7t0HQES7sRXgDpCJc2H12BMlDx7ge3skRpMsqxmXkWY4glVAuI/0fIKT/pWHNDaK5hx/VEYT8lSE1iBYAeHaQ7TKRH0SckigIPckCQk+iIPwkCsJPoiDkJDEIPwk/yPGRA/9aciUknVwFic46P4mC0Od+KQh9TizLsizLsizLsizLsv5tDw4JAAAAGAb1b30z9QwAAAAAAAAAAAAAAAAAAAAAAAAA5A2WClcnPfKqLQAAAABJRU5ErkJggg==");
    }

效果圖：

效果圖3.png

缺點(diǎn)： 每新增一種合同狀態(tài)，需要重新用新圖轉(zhuǎn)base64碼值蟀俊，還得改動(dòng)合同頁(yè)面html代碼钦铺。

第三階段：cavas(或svg)轉(zhuǎn)圖片的base64碼值，結(jié)合第二種階段的思路肢预。

功能需求： 在第二階段的基礎(chǔ)上矛洞，用戶提出要用合同編號(hào)做合同水印，每個(gè)業(yè)務(wù)件對(duì)應(yīng)的合同編號(hào)不一樣烫映，故需要?jiǎng)討B(tài)生成水印效果沼本，這會(huì)兒?jiǎn)涡形谋尽＝Y(jié)果隔了一周左右锭沟，又一個(gè)地方的用戶提出需要顯示多行文本的水映檎住（城市名、平臺(tái)名稱族淮、合同編號(hào)郊丛、簽約時(shí)間）。
大體實(shí)現(xiàn)思路： 將canvas或svg轉(zhuǎn)base64碼值瞧筛，然后結(jié)合第二階段的思路。

svg實(shí)現(xiàn)方式

代碼參考： demo頁(yè)面代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>svg動(dòng)態(tài)生成合同水印(轉(zhuǎn)pdf的工具生成的碼值不一樣导盅，故pdf沒(méi)法生成水印)</title>
    <script src="jquery.js"></script>

    <style type="text/css">
        body{
            font-family:-apple-system-font,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
            color: #000;
        }
        .water{
            background-color: transparent;
            background-repeat: repeat;
            background-position: 0 0;
            background-size: 220px 220px;
        }
        .svg-wrap{
            width: 220px;
            height: 220px;
            border: 1px solid #f00;
        }
        .svgimg,
        #detail{
            margin-bottom: 20px;
            width: 500px;
            min-height: 240px;
            /* background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJteXN2ZyIgaGVpZ2h0PSIyMjAiIHdpZHRoPSIyMjAiIGVuY29kaW5nPSJ1dGYtOCI+CiAgICAgICAgICAgIDx0ZXh0IGZpbGw9IiNmMDAiIGZvbnQ9ImJvbGQg5a6L5L2TIiBmb250LXNpemU9IjMwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUsMTEwLDExMCkiIHg9IjExMCIgeT0iMTEwIiBlbmNvZGluZz0idXRmLTgiPuW3suWkh+ahiDwvdGV4dD4KICAgICAgICA8L3N2Zz4='); */
            background-repeat: repeat;
            background-position: 0 0;
            background-size: 100px 100px;

            word-break: break-all;
        }
    </style>
</head>
<body class="">     
    <!-- XT20220708151515 已備案-->
    <!-- font="bold 宋體"  -->
    <h4>待轉(zhuǎn)換的svg：水印文本：XT20220708151515较幌、已備案</h4>
    <div class="svg-wrap">
        <svg id="mysvg" height="220" width="220" encoding="utf-8">
            <text fill="#f00" font-size="30" text-anchor="middle" dominant-baseline="middle" transform="rotate(-45,110,110)" x="110" y="110" encoding="utf-8">已備案</text>
        </svg>
    </div>

    <h4>svg轉(zhuǎn)換后的img的base64碼值和背景圖渲染效果：</h4>
    <div class="svgimg" id="water"></div>

    <div>
        網(wǎng)頁(yè)版、wkhtmltopdf工具時(shí)白翻，生成的base64碼值是否一致：<span class="dev"></span>
    </div>
    <!-- https://www.bootcdn.cn/Base64/ -->
    <!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/Base64/1.1.0/base64.min.js"></script> -->
<script>
    //初始化加載
    $(function () {
        //網(wǎng)頁(yè)版乍炉，生成的base64碼值
        //已備案
        var page64 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJteXN2ZyIgaGVpZ2h0PSIyMjAiIHdpZHRoPSIyMjAiIGVuY29kaW5nPSJ1dGYtOCI+CiAgICAgICAgCTx0ZXh0IGZpbGw9IiNmMDAiIGZvbnQtc2l6ZT0iMzAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRyYW5zZm9ybT0icm90YXRlKC00NSwxMTAsMTEwKSIgeD0iMTEwIiB5PSIxMTAiIGVuY29kaW5nPSJ1dGYtOCI+5bey5aSH5qGIPC90ZXh0PgogICAgICAgIDwvc3ZnPg==';
        //XT20220708151515
        // page64 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJteXN2ZyIgaGVpZ2h0PSIyMjAiIHdpZHRoPSIyMjAiIGVuY29kaW5nPSJ1dGYtOCI+CiAgICAgICAgCTx0ZXh0IGZpbGw9IiNmMDAiIGZvbnQtc2l6ZT0iMzAiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRyYW5zZm9ybT0icm90YXRlKC00NSwxMTAsMTEwKSIgeD0iMTEwIiB5PSIxMTAiIGVuY29kaW5nPSJ1dGYtOCI+WFQyMDIyMDcwODE1MTUxNTwvdGV4dD4KICAgICAgICA8L3N2Zz4=';
        //wkhtmltopdf工具绢片，生成的base64碼值
        var tool64 = 'data:image/svg+xml;base64,PHN2ZyBpZD0ibXlzdmciIGhlaWdodD0iMjIwIiB3aWR0aD0iMjIwIiBlbmNvZGluZz0idXRmLTgiPgogICAgICAgIAk8dGV4dCBmaWxsPSIjZjAwIiBmb250LXNpemU9IjMwIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUsMTEwLDExMCkiIHg9IjExMCIgeT0iMTEwIiBlbmNvZGluZz0idXRmLTgiPuW3suWkh+ahiDwvdGV4dD4KICAgICAgICA8L3N2Zz4=';

        function svgBase64() {
            var svg = document.getElementById('mysvg');
            var s = new XMLSerializer().serializeToString(svg);

            // 方法一
            s = unescape(encodeURIComponent(s));//btoa、atoa不支持中文岛琼，用unescape處理
            var svgBase64 = window.btoa(s);
            svgBase64 = window.decodeURIComponent(svgBase64);

            // 方法二
            // s = decodeURIComponent(encodeURIComponent(s));//unescape已經(jīng)過(guò)時(shí)廢棄底循，換成uri處理
            // var svgBase64 = window.btoa(reEncode(s));
            // svgBase64 = svgBase64;

            // 方法三
            // var svgBase64 = Base64.encode(s);//base64.min.js

            var imgBase64 = 'data:image/svg+xml;base64,'+svgBase64;
            console.log({code:imgBase64});
            console.log(tool64);
            $('.dev').html(imgBase64==page64?'是':'否');
            var imgStr = "background-image: url('"+imgBase64+"');";
            $('.svgimg').html(imgStr);
            $('.svgimg').attr('style',imgStr);
        }

        function reEncode(data) {
            return decodeURIComponent(
                encodeURIComponent(data).replace(/%([0-9A-F]{2})/g, function(match, p1) {
                    const c = String.fromCharCode('0x'+p1);
                    return c === '%' ? '%25' : c;
                })
            )
        }
        

        svgBase64();

    });


</script>
</body>
</html>

-效果圖：

效果圖2.jpg

缺點(diǎn)： 雖然chrome瀏覽器打印能滿足，但是工具wkhtmltopdf轉(zhuǎn)pdf打印槐瑞，水印效果消失熙涤。問(wèn)題點(diǎn)：網(wǎng)頁(yè)上svg轉(zhuǎn)base64的生成的碼值和工具wkhtmltopdf內(nèi)置瀏覽器生成的碼值不一致，并且后者生成的base64碼值單獨(dú)拿出來(lái)放瀏覽器的也無(wú)法顯示困檩，放console里祠挫，點(diǎn)擊后只能解析成svg，不能解析成圖片悼沿。如下圖：

svg1.jpg

canvas實(shí)現(xiàn)方式 $\color{red}{推薦}$

代碼參考： demo頁(yè)面代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>canvas動(dòng)態(tài)生成合同水印(多行文本)</title>
    <script src="jquery.js"></script>

    <style type="text/css">
        body{
            font-family:-apple-system-font,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;
            color: #000;
        }
        .red{
            color: #f00;
            padding-right: 6px;
        }
        /*水印*/
        .watermark{
            display: none;
            position: fixed;
            z-index: -1;
            left: 0;
            top: 0;
            width: 100%;
            /*height: 1134px;*/
            height: 100%;
            background-repeat: repeat;
            background-position: 0 0;
            background-size:300px 300px;
        }
        /*無(wú)水印*/
        .watermark.water-no{
            display: none !important;
        }

        /* 調(diào)試用 */
        body{
            padding: 10px;
            padding-bottom: 100%;/*如果不加等舔，那么調(diào)試的哪些div全是absolute,fixed布局，會(huì)導(dǎo)致body本身并沒(méi)有撐開(kāi)高度糟趾，所以轉(zhuǎn)pdf后會(huì)看不到水印*/
        }
        .test-canvas{
            position: absolute;
            left: 430px;
            top: 10px;
        }

        /* 計(jì)算用 */
        .test-fli{
            position: absolute;
            left: 150px;
            top: 150px;
        }
        .test-con{
            position: absolute;
            left: 10px;
            top:  10px;
            width: 400px;
            height: 400px;
            outline: 1px solid #f00;
        }
        .con1,
        .con2,
        .con3{
            outline: 1px solid #0f0;
            width: 278px;
            height: 110px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .con1{
            position: absolute;
            left: 0;
            top: 0;
        }
        .con2{
            outline: 1px dashed #0f0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .con3{
            outline: 1px dashed #00f;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%) rotate(-45deg);
        }
    </style>
    <!-- <script src="download2.js"></script> -->
</head>
<body>
    <!--水印-->
    <div class="watermark"></div>
    <div class="test-fli">
        <div class="test-canvas" style="left: 10px;">
            <canvas id="myCanvas" width="400" height="400" style="outline:1px solid #f00;"></canvas>
        </div>
        <!-- 對(duì)比參照用 -->
        <div class="test-con">
            <div class="con1">原位置(canvas畫(huà)布文字內(nèi)容的寬高)</div>
            <div class="con2">居中</div>
            <div class="con3" style="font-size: 20px;line-height: 30px;text-align: center;"></div>
        </div>
    </div>
<script>
    //初始化加載
    $(function () {
        function canvasToBase64(text,opt){
            //水印內(nèi)容
            var txt = text;//多行文本慌植，用逗號(hào)(,)分割。
            if(!text) return false;
            var txtArr = txt.split(',');
            if(!opt){
                opt = {};
            }
            //水印配置：字體义郑，字號(hào)蝶柿，是否加粗，文本傾斜角度魔慷，文本顏色只锭，水印圖的寬高(必須大于文本寬高)
            var fontSize = opt.fontSize || 20;//單位：px，單行文本的字號(hào)
            var fontSizeArr = opt.fontSizeArr ? opt.fontSizeArr : [];//單位：px院尔，多行文本的字號(hào)
            var lineHeight = opt.lineHeight ? opt.lineHeight : Math.floor(fontSize*1.5);//行高蜻展，默認(rèn)為fontSize字號(hào)的1.5倍行高
            var fontFamily = opt.fontFamily || '宋體';//字體，默認(rèn)宋體
            var fontWeight = opt.fontWeight || 'bold';//是否加粗邀摆，默認(rèn)加粗
            var angle = opt.angle || -45;//文本傾斜角度纵顾，默認(rèn)-45deg
            var fontColor = opt.fontColor || '#d9d9d9';//文本顏色，默認(rèn)'#d9d9d9'
            var width = opt.width || 200;//畫(huà)布canvas寬度栋盹，單位px施逾，默認(rèn)200
            var height = opt.height || 200;//畫(huà)布canvas高度，單位px例获，默認(rèn)200
            
            var txtHeight = lineHeight*(txtArr.length)- (lineHeight-fontSize);//文字高度汉额，因?yàn)槲淖执怪狈较蚴莟op，高度需要減掉最后一行文本的多余行間距：lineHeight-fontSize
            // var canvas = document.getElementById("myCanvas");//本地調(diào)試效果用
            var canvas = document.createElement('canvas');
            canvas.width = width;
            canvas.height = height;
            var context = canvas.getContext("2d");
            // 設(shè)置字體
            context.font = fontWeight+' '+fontSize+'px '+fontFamily;//比如："bold 20px 宋體"
            // 設(shè)置水平對(duì)齊方式
            context.textAlign = 'left';//left,center,right
            // 設(shè)置垂直對(duì)齊方式
            context.textBaseline = 'top';//top,bottom,middle

            //不旋轉(zhuǎn)榨汤，參考用
            // var angle = -45;
            var strWidth = context.measureText(txt).width;
            var strWidthArr = [];
            txtArr.forEach(function(txt, index){
                var tempW = Math.ceil(context.measureText(txt).width);//向上取整蠕搜，保證無(wú)小數(shù)
                strWidthArr.push(tempW);
            });
            console.log('文字塊：',strWidthArr);
            strWidth = Math.max.apply(null,strWidthArr);
            console.log("文字塊寬高:"+strWidth+','+txtHeight);
            context.save();
            var tx = (canvas.width - strWidth)/2;
            var ty = (canvas.height - txtHeight)/2;//字號(hào)等于行高 
    
            //中心位置旋轉(zhuǎn)
            context.save();
            //p0 畫(huà)布起始點(diǎn)（0,0），p1 canvas畫(huà)布中心點(diǎn)（canvas.width/2, canvas.height/2）收壕，p2 文本塊最終位置的左上角那個(gè)店（x2,y2）未知的需計(jì)算
            var p1p2 = Math.sqrt(Math.pow(strWidth/2,2)+Math.pow(txtHeight/2,2));//文本塊左上角妓灌，中心點(diǎn)連線長(zhǎng)度
            var p1p2Angle = (Math.atan(strWidth/txtHeight)*180/Math.PI-(90-Math.abs(angle)))*Math.PI/180;//文本塊左上角轨蛤，中心點(diǎn)連線和水平軸x的角度
            console.log('文本塊left-center連線: length：'+p1p2+',angle(PI):'+p1p2Angle);
            tx = (canvas.width/2)-Math.cos(p1p2Angle)*p1p2;
            ty = (canvas.height/2)+Math.sin(p1p2Angle)*p1p2;
            console.log('p2:('+tx+','+ty+')');
            // ty = 334;
            context.translate(tx, ty);
            context.rotate(angle * Math.PI / 180);//先移動(dòng)translate,再旋轉(zhuǎn)rotate，就是以文本原點(diǎn)為基點(diǎn)虫埂，如果先旋轉(zhuǎn)再移動(dòng)祥山，就是以畫(huà)布canvas原點(diǎn)為基點(diǎn)
            context.fillStyle = fontColor;
            var y = 0;
            var x = 0;
            txtArr.forEach(function(txt, index){
                if(fontSizeArr.length==txtArr.length){
                    //如果每行文本的字號(hào)不一樣
                    var tempFontSize = fontSizeArr[index];
                    context.font = fontWeight+' '+tempFontSize+'px '+fontFamily;//比如："bold 20px 宋體"
                }
                x = (strWidth - strWidthArr[index])/2;
                context.fillText(txt, x, y + lineHeight * index);
            });

            // context.fillText(txt, 0, 0);//單行文字
            context.restore(); 
            

            // 生成圖片信息
            var dataUrl = canvas.toDataURL('image/png');
            return dataUrl;
        }
        // var photoUrl = canvasToBase64('存量房網(wǎng)上交易平臺(tái),合同編號(hào)：預(yù)201911260001,2022/10/13 11:01:02');
        //調(diào)試文本：合同草稿，XT20220708151515
        //多行文本：逗號(hào)（,）分割掉伏，比如：'存量房網(wǎng)上交易平臺(tái),合同編號(hào)：預(yù)201911260001,2022/10/13 11:01:02'
        var photoUrl = canvasToBase64('阜陽(yáng)市,新建商品房交易網(wǎng)上交易平臺(tái),合同編號(hào)：FY2022335646,2022/10/13 11:01:02',{
            width: 400,
            height: 400,
            fontSize: 20,
            // angle: -30,
            // fontSizeArr: [18,20,18],//多行文本缝呕，每行文字字號(hào)不一樣時(shí)配置
            // lineHeight: 30,//默認(rèn)為字號(hào)的1.5倍行高
            // fontColor: '#f00',
        });
        // console.log('文字轉(zhuǎn)圖片：',photoUrl);
        $('.watermark').attr('style','display:block;background-image:url('+photoUrl+');background-size:400px 400px');
    });


</script>
</body>
</html>

效果圖：

效果圖1.jpg
缺點(diǎn)： 暫無(wú)战惊。

參考

wkhtmltopdf
用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)動(dòng)態(tài)水印

最后編輯于：2023.01.17 14:28:10

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末伟件，一起剝皮案震驚了整個(gè)濱河市名眉，隨后出現(xiàn)的幾起案子鸦做，更是在濱河造成了極大的恐慌涧偷，老刑警劉巖戳稽，帶你破解...
沈念sama閱讀 206,311評(píng)論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件筹陵，死亡現(xiàn)場(chǎng)離奇詭異益老，居然都是意外死亡闯参，警方通過(guò)查閱死者的電腦和手機(jī)瞻鹏，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,339評(píng)論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)鹿寨，“玉大人新博，你說(shuō)我怎么就攤上這事〗挪荩” “怎么了赫悄？”我有些...
開(kāi)封第一講書(shū)人閱讀 152,671評(píng)論 0贊 342
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)馏慨。經(jīng)常有香客問(wèn)我埂淮，道長(zhǎng)，這世上最難降的妖魔是什么写隶？我笑而不...
開(kāi)封第一講書(shū)人閱讀 55,252評(píng)論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任倔撞，我火速辦了婚禮，結(jié)果婚禮上慕趴，老公的妹妹穿的比我還像新娘痪蝇。我一直安慰自己，他們只是感情好冕房，可當(dāng)我...
茶點(diǎn)故事閱讀 64,253評(píng)論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布躏啰。她就那樣靜靜地躺著，像睡著了一般耙册。火紅的嫁衣襯著肌膚如雪给僵。梳的紋絲不亂的頭發(fā)上，一...
開(kāi)封第一講書(shū)人閱讀 49,031評(píng)論 1贊 285
城市分裂傳說(shuō)
那天觅玻，我揣著相機(jī)與錄音想际，去河邊找鬼。笑死溪厘，一個(gè)胖子當(dāng)著我的面吹牛胡本，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播畸悬，決...
沈念sama閱讀 38,340評(píng)論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼侧甫，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了蹋宦？” 一聲冷哼從身側(cè)響起披粟，我...
開(kāi)封第一講書(shū)人閱讀 36,973評(píng)論 0贊 259
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎冷冗，沒(méi)想到半個(gè)月后守屉，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,466評(píng)論 1贊 300
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡蒿辙，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 35,937評(píng)論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年拇泛，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片思灌。...
茶點(diǎn)故事閱讀 38,039評(píng)論 1贊 333
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡俺叭，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出泰偿，到底是詐尸還是另有隱情熄守，我是刑警寧澤，帶...
沈念sama閱讀 33,701評(píng)論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布耗跛，位于F島的核電站裕照，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏课兄。R本人自食惡果不足惜牍氛，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,254評(píng)論 3贊 307
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望烟阐。院中可真熱鬧搬俊，春花似錦、人聲如沸蜒茄。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 30,259評(píng)論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)檀葛。三九已至玩祟，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間屿聋，已是汗流浹背空扎。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 31,485評(píng)論 1贊 262
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工藏鹊，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人转锈。一個(gè)月前我還...
沈念sama閱讀 45,497評(píng)論 2贊 354
代替公主和親
正文我出身青樓盘寡，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親撮慨。傳聞我的和親對(duì)象是個(gè)殘疾皇子竿痰，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 42,786評(píng)論 2贊 345