html2canvas 截图table不全的问题_html2canvas转换iview表格不完整问题-CSDN博客

本文链接：https://blog.csdn.net/weixin_43997143/article/details/115123158

本文介绍了在Vue应用中遇到html2canvas截图table内容不完全显示的解决方案。关键在于获取table的实际宽度并赋值给最外层div，确保截图完整。通过监听点击事件触发下载图片，并提供了相关代码示例。同时提示，若图片显示不全，可能需要调整scrollY和scrollX的值。文章还推荐了一篇知乎上的相关讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中，html2canvas 截图table不全的问题

iview-table本身自带的滚动条，最外层获取不到最大的宽度，需要在下载的时候获取table的ivu-table-tbody宽度，然后赋值给table。
点击download_canvas_image就可以下载图片了，如果不需要在页面上展示，就把代码放开直接就能下载了


<template>
    <div id='tableId'>
        <Button type="primary" @click='downImg'>下载为图片</Button>
        <Table class='ivuTableWrapper'  style="width:550px;"  border :columns="columns2" :data="data3"></Table>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
    export default {
        name: 'App',
        data () {
            return {
                columns2: [
                    {
                        title: 'Name',
                        key: 'name',
                        width: 100,
                        fixed: 'left'
                    },
                    {
                        title: 'Age',
                        key: 'age',
                        width: 100
                    },
                    {
                        title: 'Province',
                        key: 'province',
                        width: 100
                    },
                    {
                        title: 'City',
                        key: 'city',
                        width: 100
                    },
                    {
                        title: 'Address',
                        key: 'address',
                        width: 200
                    },
                    {
                        title: 'Postcode',
                        key: 'zip',
                        width: 100
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    }
                                }, 'Edit')
                            ]);
                        }
                    }
                ],
                data3: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        province: 'America',
                        city: 'New York',
                        zip: 100000
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'Washington, D.C. No. 1 Lake Park',
                        province: 'America',
                        city: 'Washington, D.C.',
                        zip: 100000
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        province: 'Australian',
                        city: 'Sydney',
                        zip: 100000
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        province: 'Canada',
                        city: 'Ottawa',
                        zip: 100000
                    }
                ],
            }
        },
        methods: {
         downImg(){
            let that = this;   
            var oDiv = document.getElementsByClassName('ivuTableWrapper')[0];
            var aaa = document.getElementsByClassName('ivu-table-tbody')[0];
            oDiv.style.width = aaa.offsetWidth;
            oDiv.style.cssText = `width: ${aaa.offsetWidth}`;
            html2canvas(oDiv, {
                useCORS: true, //支持图片跨域
                scale: 1, //设置放大的倍数
                height: oDiv.scrollHeight, //canvas高
                width: oDiv.scrollWidth, //canvas宽
                windowHeight: oDiv.scrollHeight,
                windowWidth: oDiv.scrollWidth,
            })
            .then((canvas) => {
                /****  直接下载图片--代码
	                // const a = document.createElement('a'); 
	                // a.href = canvas.toDataURL('image/png');
	                // a.download = '关注指标';
	                // a.click();
                ***/
                //显示在页面再点击下载
                document.getElementById('tableId').appendChild(canvas);
                var oCavans = document.getElementsByTagName('canvas')[0];
                var strDataURI = oCavans.toDataURL();
                that.downLoadFn(strDataURI);
            })
        },
        downLoadFn(strDataURI) {
            var link = document.createElement('a');
            link.innerHTML = 'download_canvas_image';
            link.download = 'img.png';
            link.addEventListener('click', function(ev) {
                link.href = strDataURI;
            }, false); 
            document.body.appendChild(link);
        }
      },
        mounted() {
           
        }
    }
</script>