supermap+openlayers地图打印

YUJIAN。

已于 2022-10-18 16:21:40 修改

阅读量695

点赞数

分类专栏：地图文章标签：前端 javascript 开发语言

于 2022-10-18 16:12:18 首次发布

本文链接：https://blog.csdn.net/Yu_Jian_Qt/article/details/127390870

版权

地图专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用dom-to-image和html2canvas库解决复杂地图打印问题。当html2canvas遇到跨域或复杂绘制元素时可能出现错误，此时通过dom-to-image可以弥补这一缺陷。详细步骤包括安装依赖、实现printScreen和htmlToImage函数，并针对IE11提供了特殊处理。同时，提到了地图切片服务的跨域配置对打印成功的影响。

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

地图打印功能

使用dom-to-image和html2canvas完成地图打印，本来是打算仅用html2canvas来完成，但是项目中会涉及到很负责的绘制操作，然后再打印，此时会一直进入catch，配合dom-to-image完美解决。

准备

npm install dom-to-image html2canvas

代码

       printScreen(title = '地图截图') {
            let node = document.getElementById('map')
            domtoimage.toJpeg(node, { quality: 1.0 })
                .then((dataUrl) => {
                    let link = document.createElement('a');
                    link.download = title + '.jpeg';
                    link.href = dataUrl;
                    link.click();
                }).catch(error => {
                    console.log(error)
                    // 这里如果跨域的话或地图上有负责的绘制元素等原因可能会失败，转用html2canvas
                    this.htmlToImage(title)
                });
        },
        htmlToImage(title) {
            // 调用html2canvas插件
            html2canvas(document.getElementById('map'), {
                // foreignObjectRendering: true,
                // 用于渲染的缩放比例
                scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
                allowTaint: true, // 允许跨域图片
                // 是否尝试使用CORS从服务器加载图像（据说是火狐浏览器必须要加，加上吧那）
                useCORS: true,//火狐浏览器添加项
            }).then(canvas => {
                let userAgent = navigator.userAgent;
                //判断是否是IE11
                if (-1 !== userAgent.indexOf("Trident")) {
                    let image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
                    let arr = image.split(',');
                    let mime = arr[0].match(/:(.*?);/)[1];
                    let bstr = atob(arr[1]);
                    let n = bstr.length;
                    let u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    window.navigator.msSaveBlob(new Blob([u8arr], { type: mime }), title + ".png");
                } else {
                    canvas.id = "mycanvas";
                    // 生成base64图片数据
                    let dataUrl = canvas.toDataURL();
                    let newImg = document.createElement("img");
                    newImg.setAttribute('crossOrigin', 'anonymous');
                    newImg.src = dataUrl;
                    // 创建一个超链接
                    let b = document.createElement('a')
                    b.setAttribute("href", dataUrl)
                    b.setAttribute("download", title + ".png")
                    document.body.appendChild(b)
                    // 点击并删除
                    b.click(); b.remove()
                }
            }).catch(error => {
                console.error(error)
            });
        }

另外，在生产环境中，如果打印失败的话，可能是地图切片服务没有开启跨域配置，例如：

source = new WMTS(
            {
              crossOrigin: 'anonymous',
              ...其他配置
            }        )