<template>
<view class="content" id="targetDom">
页面 - 5
<button @click="test.onClick">导出</button>
</view>
</template>
<script module="test" lang="renderjs">
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
data() {
return { title: 'Hello' }
},
onLoad() {
},
methods: {
onClick(event, ownerInstance) {
// var dom = uni.createSelectorQuery().select('#targetDom')
// console.log(dom)
html2Canvas(document.querySelector('#targetDom'), {
// allowTaint: true 表示允许跨越的图片
allowTaint: true
}).then(function(canvas) {
let imgWidth = canvas.width
let imgHeight = canvas.height
// 生成canvas截图，1表示生成的截图质量（0-1）
let pageData = canvas.toDataURL('image/jpeg', 1.0)
// new JsPDF接收三个参数，landscape表示横向（默认不填是纵向），打印单位和纸张尺寸
let PDF = new JsPDF('landscape', 'pt', 'a4')
// 调用addImage方法，第一个参数表示生成的截图内容，第二个参数表示图片格式，第三个参数表示距纸张左侧的距离，第四个参数表示距纸张上方的距离，第五个参数表示生成截图的image的宽度，第六个参数表示生成截图的image的高度
PDF.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight)
// 调用save方法生成pdf文件
PDF.save('test' + '.pdf')
})
}
}
}
</script>
<style>
.content {
text-align: center;
height: 400upx;
margin-top: 200upx;
}
</style>
