|
|
@ -146,9 +146,7 @@ |
|
|
<img v-if="current < 15" class="img turn right" src="@/static/image/icon-right.png" @click="next" /> |
|
|
<img v-if="current < 15" class="img turn right" src="@/static/image/icon-right.png" @click="next" /> |
|
|
|
|
|
|
|
|
<div class="flex bottom"> |
|
|
<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> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
@ -197,8 +195,16 @@ |
|
|
next() { |
|
|
next() { |
|
|
this.current += 1 |
|
|
this.current += 1 |
|
|
}, |
|
|
}, |
|
|
createPdf() { |
|
|
|
|
|
|
|
|
async upload(pdfBlob) { |
|
|
|
|
|
const pdfUrl = URL.createObjectURL(pdfBlob); |
|
|
|
|
|
|
|
|
|
|
|
const url = await this.$Oss.ossUpload(pdfUrl) |
|
|
|
|
|
console.log('ossUpload', url) |
|
|
|
|
|
|
|
|
|
|
|
return url |
|
|
|
|
|
}, |
|
|
|
|
|
createPdf() { |
|
|
|
|
|
|
|
|
uni.showLoading({ |
|
|
uni.showLoading({ |
|
|
title: '生成中...' |
|
|
title: '生成中...' |
|
|
}) |
|
|
}) |
|
|
@ -239,57 +245,19 @@ |
|
|
fillPage() |
|
|
fillPage() |
|
|
} |
|
|
} |
|
|
const canvas = item.value |
|
|
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) |
|
|
let pageData = canvas.toDataURL('image/jpeg', 1.0) |
|
|
PDF.addImage(pageData, 'JPEG', 0, 0, WIDTH, HEIGHT) |
|
|
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 |
|
|
|
|
|
|
|
|
|
|
|
PDF.save('测试生成pdf' + '.pdf'); //h5在这就可以保存pdf |
|
|
|
|
|
|
|
|
|
|
|
// #endif |
|
|
|
|
|
|
|
|
|
|
|
return |
|
|
|
|
|
|
|
|
|
|
|
uni.postMessage({ |
|
|
|
|
|
data: { |
|
|
|
|
|
imageData: PDF.output("datauristring"), |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
// 将 PDF 文件转换为 Blob 对象 |
|
|
|
|
|
const pdfBlob = PDF.output('blob'); |
|
|
|
|
|
return this.upload(pdfBlob) |
|
|
|
|
|
}).then(url => { |
|
|
|
|
|
this.$jWeixin.miniProgram.postMessage({ |
|
|
|
|
|
data: url |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
// uni.navigateBack() |
|
|
|
|
|
uni.redirectTo({ |
|
|
|
|
|
url: `/pages_order/thesis/createPdf?id=${this.id}` |
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.$jWeixin.miniProgram.navigateBack() |
|
|
}).catch(err => { |
|
|
}).catch(err => { |
|
|
console.log('err', err) |
|
|
console.log('err', err) |
|
|
}).finally(() => { |
|
|
}).finally(() => { |
|
|
@ -400,29 +368,28 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.bottom { |
|
|
.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; |
|
|
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 { |
|
|
.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; |
|
|
color: #FFFFFF; |
|
|
background: #4883F9; |
|
|
|
|
|
border-radius: 21px; |
|
|
|
|
|
border: none; |
|
|
|
|
|
|
|
|
background: linear-gradient(to right, #21FEEC, #019AF9); |
|
|
|
|
|
border: 2rpx solid #00A9FF; |
|
|
|
|
|
border-radius: 41rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
Fox-33