uniapp(h5)生成pdf保存文件

<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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容