OpenLayers技术问题：为导出的PNG地图设置自定义文件名

Absolutely! You can set a custom filename for your exported OpenLayers map PNG—your current code has a couple of small fixes needed to work reliably across both modern and legacy Microsoft browsers. Here's the adjusted solution:

document.getElementById('export-png').addEventListener('click', function () {
  // Get custom filename upfront before starting export
  const imgName = prompt("Please provide the name", "survey_map");
  if (!imgName) return; // Exit if user cancels the prompt

  map.once('rendercomplete', function () {
    const mapCanvas = document.createElement('canvas');
    const size = map.getSize();
    mapCanvas.width = size[0];
    mapCanvas.height = size[1];
    const mapContext = mapCanvas.getContext('2d');

    Array.prototype.forEach.call(
      document.querySelectorAll('.ol-layer canvas'),
      function (canvas) {
        if (canvas.width > 0) {
          const opacity = canvas.parentNode.style.opacity;
          mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity);
          const transform = canvas.style.transform;
          // Get the transform parameters from the style's transform matrix
          const matrix = transform
            .match(/^matrix\(([^\(]*)\)$/)[1]
            .split(',')
            .map(Number);
          // Apply the transform to the export map context
          CanvasRenderingContext2D.prototype.setTransform.apply(
            mapContext,
            matrix
          );
          mapContext.drawImage(canvas, 0, 0);
        }
      }
    );

    if (navigator.msSaveBlob) {
      // Handle legacy IE/Edge browsers
      navigator.msSaveBlob(mapCanvas.msToBlob(), `${imgName}.png`);
    } else {
      // Handle modern browsers (Chrome, Firefox, new Edge, etc.)
      const link = document.getElementById('image-download');
      link.href = mapCanvas.toDataURL('image/png');
      link.download = `${imgName}.png`; // Assign custom filename here
      link.click();
    }
  });
  map.renderSync();
});

Key Fixes & Improvements: #

• Prompt placement: Getting the filename before triggering the map render ensures we don’t waste resources if the user cancels the prompt.
• Modern browser support: The download attribute on the anchor tag tells browsers to use your custom filename instead of the default download.png or data URL-generated name.
• Legacy browser fix: Your original code used escaped quotes (") in the prompt, which could cause unexpected behavior in old IE/Edge. Replacing them with regular quotes and using template literals for filename concatenation makes this logic more reliable.

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