Algunas aplicaciones de desarrollo sobre enlaces Blob

1. ¿Qué es un enlace Blob?

El enlace Blob es un enlace generado en base a URL.createObjectURL (blob), que puede convertir el contenido de archivos o datos en formato URL para facilitar la descarga o visualización. Los enlaces de blobs pueden ser datos binarios, audio, vídeo, imágenes, etc.

2. Cómo generar enlaces Blob

1. Crea un objeto Blob

// data为文件的内容，type为文件类型
const blob = new Blob([data], { type: 'text/plain' }); 

Tiene dos parámetros:

• array : Se colocarán  objetos como  ArrayBuffer, ArrayBufferView, Blob, etc .;DOMStringBlob
• options:  BlobPropertyBag Diccionario opcional, que puede especificar los dos atributos siguientes
  • typeblob : El valor predeterminado es "", que indica el tipo MIME del contenido de la matriz que se colocará en el archivo  .
  • endings: El valor predeterminado es " transparent", que se utiliza para especificar cómo \nse escriben las cadenas que contienen terminadores de línea; no se usa comúnmente.

 

2. Generar URL de blob

El método estático URL.createObjectURL() crea un DOMString que contiene una URL que representa el objeto dado en el argumento. El ciclo de vida de esta URL está vinculado al documento en la ventana en la que se creó. Este nuevo objeto URL representa el objeto File o el objeto Blob especificado.

createObjectURL devuelve una URL con hash y se almacena en la memoria hasta que el documento activa el evento de descarga (por ejemplo: cierre del documento) o ejecuta revokeObjectURL para liberarlo.

const blobUrl = URL.createObjectURL(blob);

Cabe señalar que incluso si se trata de los mismos datos binarios, cada vez que se llame al método URL.createObjectURL se obtendrá una URL de Blob diferente. El tiempo de existencia de esta URL es equivalente al tiempo de existencia de la página web. Una vez que la página web se actualice o descargue, esta URL de Blob dejará de ser válida. 

3. Descargar o mostrar archivos

// 下载文件
const link = document.createElement('a');
link.href = blobUrl;
link.download = 'filename.txt';
document.body.appendChild(link);
link.click();

// 展示文件
const iframe = document.createElement('iframe');
iframe.src = blobUrl;
document.body.appendChild(iframe);

 

3. Ventajas de los enlaces Blob

Los enlaces Blob tienen las siguientes ventajas en comparación con otros métodos de descarga:

1. No es necesario enviar solicitudes al servidor, lo que puede reducir la presión sobre el servidor.

2. Los archivos se pueden generar dinámicamente a través de JavaScript para facilitar la personalización personalizada.

3. Puede mostrar o descargar datos binarios en la memoria, evitando el problema de múltiples interacciones de datos entre el front-end y el back-end.

4. Escenarios de aplicación de enlaces Blob

Los enlaces de blobs tienen una amplia gama de escenarios de aplicación y se pueden utilizar en los siguientes aspectos del desarrollo real:

1. Reproducción de audio y vídeo.

2. Vista previa o descarga de imágenes.

3. Descargue archivos en Excel, CSV y otros formatos.

5. Cosas a tener en cuenta

1. No sigas ocupando memoria después de generar el enlace Blob. Debe liberarse a tiempo. Puedes liberarlo a través de URL.revokeObjectURL (blobURL).

2. A veces, los enlaces de Blob pueden estar bloqueados por firewalls o servidores proxy. Realice las pruebas correspondientes antes de su uso.

6. Casos de uso

1. Descargar imágenes entre dominios

function download(url) {
        var xhr = new XMLHttpRequest();
        xhr.open("get", url)
        xhr.responseType = 'blob'
        xhr.send();

        xhr.onload = function () {
            var fileBlob = xhr.response;
            console.log(fileBlob);
            var fileUrl = URL.createObjectURL(fileBlob);
         

            // a标签下载
            var addElement = document.createElement('a')
            addElement.innerHTML = '点击'
            addElement.href = fileUrl
            addElement.download = 'a.png'
            document.body.appendChild(addElement)
        }
}
    

// 调用下载跨域图片链接
download("https://xxx.png")

2. Exportar tabla a tabla de Excel

<body>

<a type="button" onclick="exportButton(this)">导出表格</a>

<table border="1">
    <tr>
        <td>学习网站</td>
        <td>网址</td>
    </tr>
    <tr>
        <td>菜鸟教程</td>
        <td>https://www.xxx.com/</td>
    </tr>
    <tr>
        <td>MDN</td>
        <td>https://developer.xxx.org/</td>
    </tr>
</table>

</body>

function exportButton(e) {

        var tableHtml = "<html><head><meta charset='utf-8' /></head><body>" + document.querySelector('table').outerHTML + "</body></html>";

        var blob = new Blob([tableHtml], {type: "application/vnd.ms-excel"});
        
        // 设置BLOB URL
        e.href = URL.createObjectURL(blob);
        
        // 设置文件名
        e.download = "表.xls";
}

 3. Canvas dibuja imágenes de dominios cruzados

export function blobDownload(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url)
    xhr.responseType = 'blob'
    xhr.send();
    xhr.onload = function () {
      var fileBlob = xhr.response;
      console.log(fileBlob);
      var fileUrl = URL.createObjectURL(fileBlob);
      resolve(fileUrl) 
    }

    // xhr.onerror = function (err) {
    //   reject(err)
    // }
  })
  
}

let url = '跨域的图片链接'

let blobUrl = ''

await blobDownload(url).then(_blobUrl => {

    blobUrl = _blobUrl

    let img = new Image()
    img.src = blobUrl
    
    img.onload = () => {
        this.ctx.drawImage(img, 0, 0, 100, 100)
    }
    
            
})


// 不用的时候要记得手动释放Blob链接
URL.revokeObjectURL(blobUrl)