|
@@ -6,7 +6,7 @@
|
|
|
:model-value="showDialog"
|
|
|
@close="closeDialog()"
|
|
|
>
|
|
|
- <div class="pdf-main">
|
|
|
+ <div class="pdf-main">
|
|
|
<div class="title" >
|
|
|
<div class="name" ></div>
|
|
|
<div class="pdf-close cursor-pointer" @click="closeDialog"></div>
|
|
@@ -14,7 +14,7 @@
|
|
|
<div id="printTest" class="pdf-dialog-box">
|
|
|
<div class="pdf-my-body" >
|
|
|
<div class="pdfBox" >
|
|
|
- <div class="a4" >
|
|
|
+ <div class="a4" id="pdfDom">
|
|
|
<div class="a4_title">确权单</div>
|
|
|
<table class="a4_table" border=1 style="border-collapse: collapse;">
|
|
|
<tr>
|
|
@@ -53,7 +53,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="text-align: left">
|
|
|
- <el-button size="large" color="#626aef" v-print="printObj">打印</el-button>
|
|
|
+ <el-button size="large" color="#626aef" @click="html2Canvas1('test')">打印</el-button>
|
|
|
+ <!-- <el-button size="large" color="#626aef" v-print="printObj">打印</el-button> -->
|
|
|
<!-- <el-button size="large" color="#626aef" @click="closeDialog">关闭</el-button>-->
|
|
|
</div>
|
|
|
|
|
@@ -62,6 +63,8 @@
|
|
|
</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";
|
|
@@ -131,6 +134,46 @@ 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')
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
|
|
|
onMounted(()=>{
|