|
|
|
@ -73,9 +73,7 @@ |
|
|
|
<img v-if="current < 13" class="turn right" style="display: block;" src="@/static/image/icon-right.png" @click="next" /> |
|
|
|
|
|
|
|
<div class="flex bottom"> |
|
|
|
<div class="flex btns"> |
|
|
|
<button class="btn" @click="createPdf">生成pdf</button> |
|
|
|
</div> |
|
|
|
<button class="btn" @click="createPdf">生成pdf</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
@ -166,40 +164,14 @@ |
|
|
|
fillPage() |
|
|
|
} |
|
|
|
const canvas = item.value |
|
|
|
const contentWidth = canvas.width |
|
|
|
const contentHeight = canvas.height |
|
|
|
// let imgHeight = (WIDTH / contentWidth) * contentHeight // 根据a4纸比例，计算出图片的高度 |
|
|
|
let pageData = canvas.toDataURL('image/jpeg', 1.0) |
|
|
|
PDF.addImage(pageData, 'JPEG', 0, 0, WIDTH, HEIGHT) |
|
|
|
|
|
|
|
return |
|
|
|
// 分页剩余高度 |
|
|
|
let leftHeight = imgHeight |
|
|
|
// 分页偏移位置 |
|
|
|
let position = 0 |
|
|
|
// 如果图片高度大于a4纸高度，则需要分页 |
|
|
|
if (imgHeight > HEIGHT) { |
|
|
|
while (leftHeight > 0) { |
|
|
|
// 第三个参数图片x轴位置，第四个参数图片y轴位置，第五个参数图片宽度，第六个参数图片高度 |
|
|
|
PDF.addImage(pageData, 'JPEG', 0, position, WIDTH, imgHeight) |
|
|
|
leftHeight = leftHeight - HEIGHT |
|
|
|
position -= HEIGHT |
|
|
|
if (leftHeight > 0) { |
|
|
|
PDF.addPage() |
|
|
|
fillPage() |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
PDF.addImage(pageData, 'JPEG', 0, 0, WIDTH, imgHeight) |
|
|
|
// const marginY = (HEIGHT - imgHeight) / 2 // 计算出图片的上下边距 |
|
|
|
// // 第三个参数图片x轴位置，第四个参数图片y轴位置，第五个参数图片宽度，第六个参数图片高度 |
|
|
|
// PDF.addImage(pageData, 'JPEG', 0, marginY > 0 ? marginY : 0, a4Width, imgHeight) |
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
// #ifdef H5 |
|
|
|
|
|
|
|
console.log('env: h5') |
|
|
|
PDF.save('测试生成pdf' + '.pdf'); //h5在这就可以保存pdf |
|
|
|
|
|
|
|
// #endif |
|
|
|
@ -304,29 +276,28 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.bottom { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100vw; |
|
|
|
height: 55px; |
|
|
|
padding: 0 25px; |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100vw; |
|
|
|
background: #FFFFFF; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 32rpx 40rpx; |
|
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx); |
|
|
|
box-sizing: border-box; |
|
|
|
background: #FFFFFF; |
|
|
|
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); |
|
|
|
|
|
|
|
.btns { |
|
|
|
width: 100%; |
|
|
|
// justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
padding: 10px 45px; |
|
|
|
font-size: 14px; |
|
|
|
width: 100%; |
|
|
|
padding: 14rpx 0; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 36rpx; |
|
|
|
line-height: 1.4; |
|
|
|
color: #FFFFFF; |
|
|
|
background: #4883F9; |
|
|
|
border-radius: 21px; |
|
|
|
border: none; |
|
|
|
background: linear-gradient(to right, #21FEEC, #019AF9); |
|
|
|
border: 2rpx solid #00A9FF; |
|
|
|
border-radius: 41rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
