Exploración e implementación de la exportación de excel desde la aplicación uniapp

prefacio

Recientemente, entré en contacto con una aplicación escrita por uniapp, que tiene la función de exportar Excel, así que la resumiré aquí.

Resultados finales

Genere Excel en el lado de la aplicación, modifique algunos parámetros de la celda (el texto está centrado, el tipo de celda es texto) y finalmente exporte el archivo .xlsx al directorio de documentos de la aplicación.

algunos problemas

0.Blob o html

Al exportar excel en uniapp, sheetjs + Blob es abrumador, y luego se descarga de una sola vez, ¡eso es en H5! No hay ningún objeto blob en la aplicación. (Otro pensamiento aquí es usar la vista web en el lado de la aplicación, para que pueda tener objetos Blob. No lo he probado y debería ser factible).

En la aplicación, debe usar el flujo de E/S del sistema para crear el archivo .xlsx y luego escribir los datos. Si escribe la siguiente plantilla HTML, puede abrirla con Excel:

 let worksheet = "sheet1";
 let tableHtml= '<tr><td>姓名</td><td>电话</td><td>邮箱</td></tr>'
      // 循环遍历，每行加入tr标签，每个单元格加td标签
      for (let i = 0; i < jsonData.length; i++) {
    
    
        tableHtml+= '<tr>'
        for (let item in jsonData[i]) {
    
    
          // 增加\t为了不让表格显示科学计数法或者其他格式
          tableHtml += `<td>${
      
      jsonData[i][item] + '\t'}</td>`
        }
        tableHtml+= '</tr>'
      }
 //下载的表格模板数据
 let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
                     xmlns:x="urn:schemas-microsoft-com:office:excel"
                     xmlns="http://www.w3.org/TR/REC-html40">
                     <head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                     <x:Name>${
      
      worksheet}</x:Name>
                     <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                     </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                     </head><body>${
      
      tableHtml}</body></html>`;

No se apresure a copiarlo, tableHtmlse puede convertir a través de sheetJS, como se menciona a continuación, por supuesto, también puede usarlo para generar bucles, puede ver directamente la implementación de guardar.

1. Estilo SheetJS o xlsx-js

Los datos en nuestra página son generalmente del tipo de objeto de matriz, y sheetJS puede convertir json a html, lo que ahorra pensar.
SheetJS: https://github.com/SheetJS/sheetjs
Documentación en chino de SheetJS: https://github.com/rockboom/SheetJS-docs-zh-CN/
SheetJS es una biblioteca realmente buena, pero su versión comunitaria no admite To modifique el estilo de celda, debe actualizar a la versión Pro y luego debe enviar un correo electrónico al autor para aplicar, Barabara. ¡pero! Se puede lograr una modificación simple del estilo de celda modificando el código fuente. El autor aquí se enfoca principalmente en la alineación central y el tipo de datos de la celda debe ser tipo texto, lo cual es completamente suficiente.

Hablemos del estilo xlsx-js.
xlsx-js-style: https://github.com/gitbrent/xlsx-js-style
La descripción oficial es SheetJS Community Edition + Basic Cell Styles, que suena bien, pero no se usa porque se guardan archivos en la aplicación.

lograr

La idea es esta:

Modifique parte del código fuente de sheetJS para cumplir con los requisitos de estilo de celda
Use sheetJS para convertir JSON a texto html (debe quitar la etiqueta de la tabla e inyectarla en la plantilla html preparada)
Guarde archivos usando H5+ api

Primero descargue xlsx.core.min.js desde github al proyecto.

1. Centre la celda y configure el tipo de texto

Busque s["data-v"] en el código fuente para encontrar la posición que debe editarse:
agregue una línea de código aquí:

s["style"] = "text-align: center; mso-number-format:'\@'";

inserte la descripción de la imagen aquí

A través de la observación, el autor descubrió que la s aquí es el objeto de la celda. Cuando se convierte a html, los atributos en s se escribirán como el estilo en línea de la celda. No es necesario explicarlo, significa que el tipo de datos de esta celda es establecido en un text-align: centertipo personalizado mso-number-format:'\@'"El valor es @.

Alguien dijo, ¿no lo configuraste como un tipo de texto? ¿Por qué lo convertiste en un tipo personalizado nuevamente? El autor abrió Excel para verificar que al configurar un formato de celda como un tipo personalizado y el valor es @, y luego verificar el tipo de celda, cambiará automáticamente al tipo de texto.

También verifiqué el motivo. En Excel, @ es el texto original de la celda de referencia, por lo que solo escribe una @, que en realidad es el texto original. Finalmente, después de un procesamiento de tipo desconocido, cambió a un tipo de texto. Si te interesa, puedes leer este artículo: Símbolo "@" en formato personalizado de Excel

2. Use sheetJS para convertir JSON a texto html

El formato de datos es el siguiente:

excelData: [
    {
    
    
        no: "1",
        tag: "weqwrqwrqwrqwrq",
        remark: "22",
    },
    {
    
    
        no: "2",
        tag: "342343434343",
        remark: "33",
    },
    {
    
    
        no: "3",
        tag: "25125152512",
        remark: "44",
    },
],

convertir a html:

const sheet = XLSX.utils.json_to_sheet(this.excelData);
const htmlSheet = XLSX.utils.sheet_to_html(sheet);

El html exportado aquí es una cadena completa que contiene etiquetas html, y solo necesitamos el contenido de la etiqueta de la tabla, que se extrae mediante expresiones regulares:

const pattern = /<table(?:(?!<\/table>).|\n)*?<\/table>/;
const tableHtml = htmlSheet.match(pattern)[0];

Finalmente obtén la plantilla completa:

const writeData = this.tableToExcel(tableHtml);

function tableToExcel(tableHtml) {
    
    
   //列标题
   let worksheet = "sheet1";
   //下载的表格模板数据
   let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office"
                       xmlns:x="urn:schemas-microsoft-com:office:excel"
                       xmlns="http://www.w3.org/TR/REC-html40">
                       <head><!--[if gte mso 9]><xml encoding="UTF-8"><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>
                       <x:Name>${
      
      worksheet}</x:Name>
                       <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                       </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
                       </head><body>${
      
      tableHtml}</body></html>`;
   return template;
},

Guarde archivos usando H5+ api

La interfaz io se usa principalmente aquí, y el documento está aquí: html5plus io document
El código para guardar el archivo es el siguiente:

 // #ifdef APP-PLUS
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
    
    
    let root = fs.root;
    // 直接在 documents 中创建文件
    root.getFile(
        `${
      
      new Date().getTime()}.xlsx`,
        {
    
    
            create: true,
        },
        (fileEntry) => {
    
    
            fileEntry.createWriter(
                (writer) => {
    
    
                    // 写入数据
                    writer.write(writeData);
                    // 写入文件成功完成的回调函数
                    writer.onwrite = (e) => {
    
    
                        uni.showToast({
    
    
                            title: `导出成功`,
                            icon: "none",
                        });
                    };
                },
                (err) => {
    
    
                    console.log(err, "创建文件写入器错误");
                }
            );
        },
        (err) => {
    
    
            console.log(err);
        }
    );
});
// #endif

Con respecto al tema del directorio de almacenamiento de la aplicación, puede leer este artículo: la API de plus.io
io capa por capa, debe experimentarla con paciencia y definitivamente puede lograr su objetivo.
¡En este punto, la función de exportación a Excel ha terminado!

¡eso es todo!