|
@@ -1,14 +1,13 @@
|
1
|
1
|
<template>
|
2
|
2
|
<div >
|
3
|
3
|
<!-- <el-button type="primary" @click="checkData">一键核对</el-button> -->
|
4
|
|
- <el-button type="primary" @click="toUpload">一键上传</el-button>
|
|
4
|
+ <el-button type="primary" @click="getPdf">一键上传</el-button>
|
5
|
5
|
<div >
|
6
|
6
|
<div
|
7
|
|
- id="dialysis-print-box-64-1 "
|
|
7
|
+ id="dialysis-print-box-64-1"
|
8
|
8
|
class="dialysis-print-order print-template-two print_page_main_content"
|
9
|
9
|
|
10
|
10
|
>
|
11
|
|
- <!-- style="padding:10px 0 0 40px ;" -->
|
12
|
11
|
<div id="dialysis-print-box-64">
|
13
|
12
|
<!-- <div 10px 0 0 40px
|
14
|
13
|
class="order-yy-name"
|
|
@@ -650,7 +649,7 @@
|
650
|
649
|
import html2pdf from 'html2pdf.js'
|
651
|
650
|
import { UploadPrintOrder } from "@/api/role/admin"
|
652
|
651
|
import { HTML5_FMT } from "moment";
|
653
|
|
- import html2canvas from 'html2canvas'
|
|
652
|
+ import html2Canvas from 'html2canvas'
|
654
|
653
|
import { jsPDF } from 'jspdf';
|
655
|
654
|
export default {
|
656
|
655
|
data() {
|
|
@@ -1242,59 +1241,117 @@
|
1242
|
1241
|
}
|
1243
|
1242
|
return name
|
1244
|
1243
|
},
|
|
1244
|
+
|
|
1245
|
+ getPdf() {
|
|
1246
|
+ // let dom = document.getElementById("dialysis-print-box-64")
|
|
1247
|
+ html2Canvas(document.querySelector('#dialysis-print-box-64'), {
|
|
1248
|
+ allowTaint: false,
|
|
1249
|
+ taintTest: false,
|
|
1250
|
+ logging: false,
|
|
1251
|
+ useCORS: true,
|
|
1252
|
+ dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
|
|
1253
|
+ scale: 4 // 按比例增加分辨率
|
|
1254
|
+ }).then(canvas => {
|
|
1255
|
+ // eslint-disable-next-line
|
|
1256
|
+ var pdf = new jsPDF('p', 'mm', 'a4') // A4纸,纵向
|
|
1257
|
+ var ctx = canvas.getContext('2d')
|
|
1258
|
+ var a4w = 190; var a4h = 277 // A4大小,210mm x 297mm,四边各保留10mm的边距,显示区域190x277
|
|
1259
|
+ var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
|
|
1260
|
+ var renderedHeight = 0
|
|
1261
|
+
|
|
1262
|
+ while (renderedHeight < canvas.height) {
|
|
1263
|
+ var page = document.createElement('canvas')
|
|
1264
|
+ page.width = canvas.width
|
|
1265
|
+ page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
|
|
1266
|
+
|
|
1267
|
+ // 用getImageData剪裁指定区域,并画到前面创建的canvas对象中
|
|
1268
|
+ page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
|
|
1269
|
+ pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面,保留10mm边距
|
|
1270
|
+
|
|
1271
|
+ renderedHeight += imgHeight
|
|
1272
|
+ if (renderedHeight < canvas.height) {
|
|
1273
|
+ pdf.addPage()// 如果后面还有内容,添加一个空页
|
|
1274
|
+ }
|
|
1275
|
+ // delete page;
|
|
1276
|
+ }
|
|
1277
|
+ console.log("podeww22222",pdf)
|
|
1278
|
+ var newBase64Data = pdf.output("dataurlstring").split("base64,")[1]
|
|
1279
|
+ console.log("newBase64Data",newBase64Data)
|
|
1280
|
+ // const blob = this.base64ToBlob(newBase64Data, 'application/pdf');
|
|
1281
|
+ // this.openPdf(blob);
|
|
1282
|
+ // // 保存文件
|
|
1283
|
+ // pdf.save(中国 + '.pdf')
|
|
1284
|
+
|
|
1285
|
+ var data = {
|
|
1286
|
+ name:newBase64Data,
|
|
1287
|
+ }
|
|
1288
|
+ UploadPrintOrder(data).then(response=>{
|
|
1289
|
+ if(response.data.state == 1){
|
|
1290
|
+ var sign = response.data.data.sign
|
|
1291
|
+ console.log("SIGNWWOOWWO")
|
|
1292
|
+ var pdfBase64 = response.data.data.pdfBase64
|
|
1293
|
+ console.log("pdfBase64",pdfBase64)
|
|
1294
|
+ this.$message.success("保存成功!")
|
|
1295
|
+ const blob = this.base64ToBlob(pdfBase64, 'application/pdf');
|
|
1296
|
+ this.openPdf(blob);
|
|
1297
|
+ }
|
|
1298
|
+ })
|
|
1299
|
+ })
|
|
1300
|
+ },
|
|
1301
|
+
|
1245
|
1302
|
|
1246
|
|
- toUpload() {
|
|
1303
|
+ // toUpload() {
|
1247
|
1304
|
|
1248
|
|
- let dom = document.getElementById("dialysis-print-box-64")
|
1249
|
|
- //调用方法下载
|
1250
|
|
- html2canvas(dom, {
|
1251
|
|
- useCORS: true, //允许跨域
|
1252
|
|
- allowTaint: false,
|
1253
|
|
- logging: false,
|
1254
|
|
- letterRendering: true,
|
1255
|
|
- ddpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
|
1256
|
|
- scale: 4, //按比例增加分辨率
|
1257
|
|
- background: '#fff',//pdf背景色为白色,默认是黑色的
|
1258
|
|
- }).then((canvas) => {
|
1259
|
|
- //返回图片dataURL,参数:图片格式和清晰度(0-1)
|
1260
|
|
- var pageData = canvas.toDataURL('image/jpeg', 1.0);
|
1261
|
|
-
|
1262
|
|
- //方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
|
1263
|
|
- var pdf = new jsPDF('', 'pt', 'a4');
|
1264
|
|
-
|
1265
|
|
- //addImage后两个参数控制添加图片的尺寸,此处将页面高度按照a4纸宽高比列进行压缩
|
1266
|
|
- // pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
|
1267
|
|
- pdf.addImage(pageData, 'JPEG', 0, 0, 555.28, 592.28 / canvas.width * canvas.height);
|
|
1305
|
+ // let dom = document.getElementById("dialysis-print-box-64")
|
|
1306
|
+ // //调用方法下载
|
|
1307
|
+ // html2canvas(dom, {
|
|
1308
|
+ // useCORS: true, //允许跨域
|
|
1309
|
+ // allowTaint: false,
|
|
1310
|
+ // logging: false,
|
|
1311
|
+ // letterRendering: true,
|
|
1312
|
+ // ddpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
|
|
1313
|
+ // scale: 4, //按比例增加分辨率
|
|
1314
|
+ // background: '#fff',//pdf背景色为白色,默认是黑色的
|
|
1315
|
+ // }).then((canvas) => {
|
|
1316
|
+ // //返回图片dataURL,参数:图片格式和清晰度(0-1)
|
|
1317
|
+ // var pageData = canvas.toDataURL('image/jpeg', 1.0);
|
|
1318
|
+
|
|
1319
|
+ // //方向默认竖直,尺寸ponits,格式a4[595.28,841.89]
|
|
1320
|
+ // var pdf = new jsPDF('', 'pt', 'a4');
|
|
1321
|
+
|
|
1322
|
+ // //addImage后两个参数控制添加图片的尺寸,此处将页面高度按照a4纸宽高比列进行压缩
|
|
1323
|
+ // // pdf.addImage(pageData, 'JPEG', 0, 0, 595.28, 592.28 / canvas.width * canvas.height);
|
|
1324
|
+ // pdf.addImage(pageData, 'JPEG', 0, 0, 555.28, 592.28 / canvas.width * canvas.height);
|
1268
|
1325
|
|
1269
|
|
- console.log("pdf222222222222222222",pdf)
|
|
1326
|
+ // console.log("pdf222222222222222222",pdf)
|
1270
|
1327
|
|
1271
|
|
- var newBase64Data = pdf.output("dataurlstring").split("base64,")[1]
|
1272
|
|
- // console.log("base63",newBase64Data)
|
1273
|
|
- const blob = this.base64ToBlob(newBase64Data, 'application/pdf');
|
1274
|
|
- console.log("blobwoowowowwo",blob)
|
1275
|
|
- this.openPdf(blob);
|
|
1328
|
+ // var newBase64Data = pdf.output("dataurlstring").split("base64,")[1]
|
|
1329
|
+ // // console.log("base63",newBase64Data)
|
|
1330
|
+ // const blob = this.base64ToBlob(newBase64Data, 'application/pdf');
|
|
1331
|
+ // console.log("blobwoowowowwo",blob)
|
|
1332
|
+ // this.openPdf(blob);
|
1276
|
1333
|
|
1277
|
|
- // var data = {
|
1278
|
|
- // name:newBase64Data,
|
1279
|
|
- // }
|
1280
|
|
- // UploadPrintOrder(data).then(response=>{
|
1281
|
|
- // if(response.data.state == 1){
|
1282
|
|
- // var sign = response.data.data.sign
|
1283
|
|
- // console.log("SIGNWWOOWWO")
|
1284
|
|
- // var pdfBase64 = response.data.data.pdfBase64
|
1285
|
|
- // console.log("pdfBase64",pdfBase64)
|
1286
|
|
- // this.$message.success("保存成功!")
|
1287
|
|
- // const blob = this.base64ToBlob(pdfBase64, 'application/pdf');
|
1288
|
|
- // this.openPdf(blob);
|
1289
|
|
- // }
|
1290
|
|
- // })
|
|
1334
|
+ // // var data = {
|
|
1335
|
+ // // name:newBase64Data,
|
|
1336
|
+ // // }
|
|
1337
|
+ // // UploadPrintOrder(data).then(response=>{
|
|
1338
|
+ // // if(response.data.state == 1){
|
|
1339
|
+ // // var sign = response.data.data.sign
|
|
1340
|
+ // // console.log("SIGNWWOOWWO")
|
|
1341
|
+ // // var pdfBase64 = response.data.data.pdfBase64
|
|
1342
|
+ // // console.log("pdfBase64",pdfBase64)
|
|
1343
|
+ // // this.$message.success("保存成功!")
|
|
1344
|
+ // // const blob = this.base64ToBlob(pdfBase64, 'application/pdf');
|
|
1345
|
+ // // this.openPdf(blob);
|
|
1346
|
+ // // }
|
|
1347
|
+ // // })
|
1291
|
1348
|
|
1292
|
|
- // this.viewPdf(newBase64Data)
|
1293
|
|
- //保存到pdf,名字是stone
|
1294
|
|
- // pdf.save('stone.pdf');
|
|
1349
|
+ // // this.viewPdf(newBase64Data)
|
|
1350
|
+ // //保存到pdf,名字是stone
|
|
1351
|
+ // // pdf.save('stone.pdf');
|
1295
|
1352
|
|
1296
|
|
- });
|
1297
|
|
- },
|
|
1353
|
+ // });
|
|
1354
|
+ // },
|
1298
|
1355
|
|
1299
|
1356
|
viewPdf(content) {
|
1300
|
1357
|
console.log("content",content);
|