|
|
@@ -116,6 +116,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { mapState } from "vuex";
|
|
|
import ElemRichText from "../elements/rich-text/ElemRichText.vue";
|
|
|
import PaperTemplateView from "../components/PaperTemplateView.vue";
|
|
|
import PaperBuildConfig from "../components/PaperBuildConfig.vue";
|
|
|
@@ -162,13 +163,18 @@ export default {
|
|
|
configSources: [],
|
|
|
prepareDownloadPdf: false,
|
|
|
actionType: "",
|
|
|
+ watermarkBg: "",
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState({ user: (state) => state.user }),
|
|
|
+ },
|
|
|
mounted() {
|
|
|
if (this.viewType === "frame") {
|
|
|
this.initFrame();
|
|
|
return;
|
|
|
}
|
|
|
+
|
|
|
this.initData();
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -262,6 +268,7 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
async initData() {
|
|
|
+ this.watermarkBg = await this.initWatermark();
|
|
|
await this.getPaperJson();
|
|
|
await this.getPaperTempList();
|
|
|
|
|
|
@@ -424,6 +431,10 @@ export default {
|
|
|
await this.runAction().catch(() => {});
|
|
|
this.prepareDownloadPdf = false;
|
|
|
});
|
|
|
+ } else {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setWatermark();
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
@@ -488,11 +499,13 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
async runAction() {
|
|
|
+ this.clearWatermark();
|
|
|
if (this.actionType === "downloadPdf") {
|
|
|
await this.downloadPaperPdf();
|
|
|
} else {
|
|
|
await this.buildPackage();
|
|
|
}
|
|
|
+ this.setWatermark();
|
|
|
},
|
|
|
async downloadPaperPdf() {
|
|
|
if (this.downloading) return;
|
|
|
@@ -568,6 +581,59 @@ export default {
|
|
|
if (!result) return;
|
|
|
this.$message.success("生成数据包成功！");
|
|
|
},
|
|
|
+ initWatermark() {
|
|
|
+ const content = this.user.displayName;
|
|
|
+
|
|
|
+ const canvas = document.createElement("canvas");
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+
|
|
|
+ const fontSize = 40;
|
|
|
+ ctx.font = `${fontSize}px serif`;
|
|
|
+ const cInfo = ctx.measureText(content);
|
|
|
+ const cwidth = Math.max(360, cInfo.width) * 1.2;
|
|
|
+ canvas.width = cwidth;
|
|
|
+ canvas.height = cwidth;
|
|
|
+
|
|
|
+ ctx.font = `${fontSize}px serif`;
|
|
|
+ ctx.fillStyle = "rgba(212,212,212,0.5)";
|
|
|
+ ctx.textAlign = "center";
|
|
|
+ ctx.textBaseline = "middle";
|
|
|
+ const angle = (315 * Math.PI) / 180;
|
|
|
+ const x = canvas.width / 2;
|
|
|
+ const y = canvas.height / 2;
|
|
|
+
|
|
|
+ ctx.translate(x, y);
|
|
|
+ ctx.rotate(angle);
|
|
|
+ ctx.fillText(content, 0, 0);
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ canvas.toBlob((val) => {
|
|
|
+ if (!val) return reject("获取水印blob错误");
|
|
|
+
|
|
|
+ resolve(window.URL.createObjectURL(val));
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ setWatermark() {
|
|
|
+ const bgSize = 240;
|
|
|
+ document
|
|
|
+ .getElementById("paper-template-view")
|
|
|
+ .querySelectorAll(".page-box")
|
|
|
+ .forEach((dom) => {
|
|
|
+ dom.setAttribute(
|
|
|
+ "style",
|
|
|
+ `background-image: url(${this.watermarkBg});background-repeat: repeat;background-size: ${bgSize}px ${bgSize}px;`
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearWatermark() {
|
|
|
+ document
|
|
|
+ .getElementById("paper-template-view")
|
|
|
+ .querySelectorAll(".page-box")
|
|
|
+ .forEach((dom) => {
|
|
|
+ dom.setAttribute("style", undefined);
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -612,4 +678,7 @@ export default {
|
|
|
z-index: 999;
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
+.paper-template-build .page-column-element .element-item {
|
|
|
+ background-color: inherit;
|
|
|
+}
|
|
|
</style>
|
