|
@@ -53,7 +53,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="text-align: left">
|
|
|
- <el-button size="large" color="#626aef" @click="html2Canvas1('test')">打印</el-button>
|
|
|
+ <el-button size="large" color="#626aef" @click="handlePrint">打印</el-button>
|
|
|
<!-- <el-button size="large" color="#626aef" v-print="printObj">打印</el-button> -->
|
|
|
<!-- <el-button size="large" color="#626aef" @click="closeDialog">关闭</el-button>-->
|
|
|
</div>
|
|
@@ -63,14 +63,13 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import html2Canvas from 'html2canvas'
|
|
|
-import JsPDF from 'jspdf'
|
|
|
import {reactive, ref, toRefs, computed, nextTick, onMounted} from "vue";
|
|
|
import {useStore} from "vuex";
|
|
|
import {WKT} from "ol/format";
|
|
|
import PdfMap from "./pdfMap";
|
|
|
import { dateFormat } from "@/utils/date_util";
|
|
|
import {getAreaByWkt} from "../../utils/map";
|
|
|
+import printPdf from "@/utils/html2Canvas";
|
|
|
const emit = defineEmits(["closeDialog","success"])
|
|
|
const state = useStore().state;
|
|
|
const sendConfirmShow = ref(false)
|
|
@@ -134,47 +133,12 @@ function toImg() {
|
|
|
// let dataURL = canvas.toDataURL('image/webp');
|
|
|
// imgUrl.value = dataURL;
|
|
|
}
|
|
|
-function html2Canvas1(){
|
|
|
-html2Canvas(document.querySelector('#pdfDom'), {//获取文档中 id="pdfDom" 的元素,返回匹配指定选择器的第一个元素
|
|
|
- allowTaint: true //允许跨源图像污染画布
|
|
|
- }).then(function (canvas) {
|
|
|
- let contentWidth = canvas.width // 获得容器的宽
|
|
|
- let contentHeight = canvas.height // 获得容器的高
|
|
|
- //一页pdf显示html页面生成的canvas高度;
|
|
|
- let pageHeight = contentWidth / 592.28 * 841.89
|
|
|
- let leftHeight = contentHeight //未生成pdf的html页面高度
|
|
|
- let position = 0 //页面偏移
|
|
|
- //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
|
|
|
- let imgWidth = 595.28
|
|
|
- let imgHeight = 592.28 / contentWidth * contentHeight
|
|
|
- //图片格式,(0-1,数字越大,代表导出的图片越清晰,默认值:0.92)
|
|
|
- let pageData = canvas.toDataURL('image/jpeg', 1.0)
|
|
|
- //第一个参数: l:横向 p:纵向
|
|
|
- //第二个参数:测量单位("pt","mm", "cm", "m", "in" or "px")
|
|
|
- //格式,默认为“a4”,如果想用自己的格式例如[595.28, 841.89]
|
|
|
- let PDF = new JsPDF('', 'pt', 'a4')
|
|
|
- //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
|
|
|
- //当内容未超过pdf一页显示的范围,无需分页
|
|
|
- if (leftHeight < pageHeight) {
|
|
|
- PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
|
|
|
- } else {
|
|
|
- while (leftHeight > 0) {
|
|
|
- PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
|
|
|
- leftHeight -= pageHeight
|
|
|
- position -= 841.89
|
|
|
- //避免添加空白页
|
|
|
- if (leftHeight > 0) {
|
|
|
- PDF.addPage()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 导出pdf文件命名
|
|
|
- // PDF.save(title + '.pdf')
|
|
|
- PDF.save('test.pdf')
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
|
|
|
+const handlePrint = () =>{
|
|
|
+ let {masterName, farmName, masterTel} = rowData.value
|
|
|
+ const title =`${farmName}-${masterTel}-${masterName}`
|
|
|
+ printPdf(title)
|
|
|
+}
|
|
|
|
|
|
onMounted(()=>{
|
|
|
VE_API.authentic.getDetails({id:rowId.value}).then(({data})=>{
|