|
|
@@ -8,7 +8,12 @@
|
|
|
<p class="article-title">打印预览</p>
|
|
|
</div>
|
|
|
<div class="print-model-bottom">
|
|
|
- <div class="print-model-bottom-left" id="showWaterMark" ref="printArea">
|
|
|
+ <div
|
|
|
+ class="print-model-bottom-left"
|
|
|
+ ref="printArea"
|
|
|
+ id="showWaterMark"
|
|
|
+ :style="{ width: isPrint ? '220mm' : '' }"
|
|
|
+ >
|
|
|
<div class="print-inner">
|
|
|
<template
|
|
|
v-if="
|
|
|
@@ -536,6 +541,9 @@
|
|
|
</p>
|
|
|
<div class="item-page" style="padding: 0 24px">
|
|
|
<el-button @click="goBack" size="small">取消</el-button>
|
|
|
+ <el-button type="primary" @click="generatePDF" size="small"
|
|
|
+ >下载</el-button
|
|
|
+ >
|
|
|
<el-button type="primary" @click="handlePrint" size="small"
|
|
|
>打印</el-button
|
|
|
>
|
|
|
@@ -549,6 +557,7 @@
|
|
|
import waterMark from "../../../store/watermark";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import { getLogin } from "@/api/ajax";
|
|
|
+import html2pdf from "html2pdf.js";
|
|
|
export default {
|
|
|
props: [
|
|
|
"titleFontsize",
|
|
|
@@ -699,6 +708,8 @@ export default {
|
|
|
dateStr: "",
|
|
|
momo: "",
|
|
|
},
|
|
|
+ isPrint: false,
|
|
|
+ printNumber: 0,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -931,12 +942,55 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ // 下载pdf
|
|
|
+ async generatePDF() {
|
|
|
+ let MethodName =
|
|
|
+ "/ShopServer/Client/PrintRecordManager/GetMyPrintCount_Article";
|
|
|
+ getLogin(MethodName, {
|
|
|
+ goods_type: 21,
|
|
|
+ date_range: "TODAY",
|
|
|
+ article_id: this.articleId,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ if (res.print_count < 5) {
|
|
|
+ getLogin(
|
|
|
+ "/ShopServer/Client/PrintRecordManager/AddPrintRecord_Article",
|
|
|
+ {
|
|
|
+ goods_type: 21,
|
|
|
+ article_id: this.articleId,
|
|
|
+ }
|
|
|
+ ).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.isPrint = true;
|
|
|
+ const element = document.getElementById("showWaterMark");
|
|
|
+ const opt = {
|
|
|
+ margin: [2.5, 0, 2.5, 0],
|
|
|
+ filename: "二十一世纪英语智慧阅读平台.pdf",
|
|
|
+ image: { type: "jpeg", quality: 0.98 },
|
|
|
+ html2canvas: { scale: 2 }, // 或其他自定义设置，例如scale可以放大内容以便更容易阅读和打印。
|
|
|
+ jsPDF: { unit: "mm", format: "a4", orientation: "portrait" }, // A4尺寸的PDF，纵向打印。
|
|
|
+ };
|
|
|
+ html2pdf().set(opt).from(element).save();
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isPrint = false;
|
|
|
+ }, 100);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.warning("今日下载次数已达上限");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
if (this.articleInfo) {
|
|
|
this.handleData();
|
|
|
this.handleHighSentence();
|
|
|
}
|
|
|
+
|
|
|
this.$nextTick(() => {
|
|
|
document.onselectstart = new Function("event.returnValue=false");
|
|
|
});
|
|
|
@@ -994,6 +1048,7 @@ export default {
|
|
|
margin: 8px 346px 8px 8px;
|
|
|
background: #fff;
|
|
|
flex-shrink: 0;
|
|
|
+
|
|
|
.print-inner {
|
|
|
overflow: auto;
|
|
|
padding: 120px 100px 30px 100px;
|
|
|
@@ -1294,6 +1349,7 @@ export default {
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
z-index: 9999;
|
|
|
+ // width: 210mm;
|
|
|
}
|
|
|
.print-footer {
|
|
|
width: 100%;
|
natasha