uniapp h5 代码生成图片

下载

npm i html2canvas

<template>
    <view class="container">
        <u-navbar :is-fixed="true" :border-bottom="false" :is-back="true" back-icon-color="#fff" 
        back-icon-size="35"  title="报价成功":background="{ background: $color }"  title-color="#fff">
        </u-navbar>
        
      <!--  <view>
            <view class="center success_i">
                <view>
                    <image  class="imgs" :src="images" mode="scaleToFill"></image>
                 </view>
                
                 <view class="title fs18">
                        报价成功
                 </view>
            </view>
        </view> -->
        
          <image :src="base64" mode=""></image>
        <view id="poster" ref="box">
        <div>价目表产品报价</div>
            <u-table>
                <u-tr>
                    <u-th>銷售信息</u-th>
                </u-tr>
                
                <u-tr>
                    <u-th>学校</u-th>
                
                </u-tr>
                <u-tr>
                    <u-td>浙江大学</u-td>
                    <u-td>二年级</u-td>
                    <u-td>22</u-td>
                </u-tr>
                <u-tr>
                    <u-td>清华大学</u-td>
                    <u-td>05班</u-td>
                    <u-td>20</u-td>
                </u-tr>
            </u-table>
        </view>
        
        <div class="mgtop20">
            <div @click="toImg()">导出报价</div>
          <!--  <u-button 
            type="primary"  
            @click="toImg"  
            style="width:80%;" 
            :ripple="true" 
             shape="circle">导出报价</u-button> -->
        </div>
        
        
            
    </view>
</template>


<script>
import html2canvas from 'html2canvas';
import jspdf from 'jspdf';
    export default {
        data() {
            return {
                  images:require('@/static/images/service/success.png'),
                base64: ''
            }
        },
        onLoad() {},
        methods: {
            toImg() {
            
                // 使页面滑到顶部，避免顶部出现白边
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 0
                })
                //|| document.documentElement('#poster');
                var dom = this.$refs.box  // 获取dom元素
                html2canvas(dom, {
                    width: dom.clientWidth, //dom 原始宽度
                    height: dom.clientHeight,
                    scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
                    scrollX: 0,
                    useCORS: true, //支持跨域，但好像没什么用
                }).then((canvas) => {
                    // 将生产的canvas转为base64图片
                    this.base64 = canvas.toDataURL('image/png')
                });
            },
        }
    }
</script>


<style scoped lang="scss">
     
    .container{
        .success_i{margin-top:120rpx;}
        .mgtop20{margin-top:50rpx;}
        .imgs{width: 400rpx; height: 360rpx;}
        .title{font-weight:bold;}
    }
    
</style>

image.png