Tengo un elemento <canvas> en mi sitio y me gustaría que el usuario pueda descargar un png del lienzo. Estoy convirtiendo los datos del lienzo en un Blob con un tipo de contenido de image/png y descargándolo mediante programación. Aquí está el código específico de descarga:

 function downloadBlob(blob, name) { const blobUrl = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = blobUrl; link.download = name; // Set filename to use when downloaded document.body.appendChild(link); link.dispatchEvent( new MouseEvent("click", { bubbles: true, cancelable: true, view: window, }), ); document.body.removeChild(link); }

Dos preguntas:

1. Esto da como resultado que la imagen se abra en la misma pestaña en lugar de descargarse. ¿Cómo puedo asegurarme de que la imagen se descargue en lugar de abrirse en el navegador?
2. También permití que el usuario descargue un archivo csv usando la misma función downloadBlob anterior, y el archivo se está descargando correctamente. Sin embargo, el nombre del archivo no es el valor de la propiedad de download que configuré. Se muestra como 3e9a771c-43c5-44af-9907-283541ef6dd8.csv , por ejemplo, en lugar de name-of-file.csv . ¿Cómo puedo hacer que se respete la propiedad de download ?