添加ol.control.CanvasTitle后OpenLayers打印PDF报错‘无法保存地图画布’

可能的问题点 #

• 字体样式的HTML实体错误：你在字体设置里使用了HTML实体"，但JS环境中需要用JS转义字符\"或单引号，这个错误会导致文本样式解析失败，进而干扰画布渲染流程。
• 可见性设置与PrintDialog渲染逻辑冲突：visible: false让CanvasTitle控件默认不渲染到地图画布，而PrintDialog生成打印画布时，不会主动触发隐藏控件的渲染，直接导致画布生成失败。
• 文本样式缺失必要属性：你的Style仅设置了font，未添加文本填充色（fill），可能引发渲染异常。

修复步骤 #

1. 修正字体样式的引号格式 #

将字体字符串中的"替换为JS支持的转义双引号，同时添加上文本填充色确保可见：

style: new ol.style.Style({ 
  text: new ol.style.Text({ 
    font: '20px \"Lucida Grande\",Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif',
    fill: new ol.style.Fill({ color: '#000' })
  }) 
})

2. 调整CanvasTitle的可见性控制逻辑 #

不要默认设置visible: false，而是通过PrintDialog的事件控制标题的显示与隐藏，确保打印时标题能被渲染到临时画布：

// 定义标题控件，初始隐藏
const titleControl = new ol.control.CanvasTitle({ 
  title: 'my title', 
  visible: false,
  style: new ol.style.Style({ 
    text: new ol.style.Text({ 
      font: '20px \"Lucida Grande\",Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif',
      fill: new ol.style.Fill({ color: '#000' })
    }) 
  })
});
map.addControl(titleControl);

// 打印前显示标题
printControl.on('beforeprint', () => {
  titleControl.setVisible(true);
});

// 打印完成/出错后隐藏标题，保留原有导出逻辑
printControl.on(['print', 'error'], (e) => {
  titleControl.setVisible(false);
  
  if (e.image) {
    if (e.pdf) {
      var pdf = new jsPDF({
        orientation: e.print.orientation,
        unit: e.print.unit,
        format: e.print.size
      });
      pdf.addImage(e.image, 'JPEG', e.print.position[0], e.print.position[0], e.print.imageWidth, e.print.imageHeight);
      pdf.save(e.print.legend ? 'legend.pdf' : 'map.pdf');
    } else  {
      e.canvas.toBlob(function(blob) {
        var name = (e.print.legend ? 'legend.' : 'map.')+e.imageType.replace('image/','');
        saveAs(blob, name);
      }, e.imageType, e.quality);
    }
  } else {
    console.warn('No canvas to export');
  }
});

3. 适配PrintDialog的渲染机制 #

ol-ext的PrintDialog生成打印画布时，只会复制当前地图的可见控件状态。通过beforeprint事件提前显示标题，能让控件被正确渲染到临时打印画布中，避免画布生成失败。

内容的提问来源于stack exchange，提问作者Andreia Gusmao