uniapp本地多个sheet导出表格

简介: uniapp本地多个sheet导出表格

一、要知道uniapp怎么写文件

uniapp写入文件操作

向文件中写入数据

writer.write( data );

说明: 从文件当前定位的位置开始,写入数据到文件中。 如果文件中已经存在数据,新写入的数据将覆盖已有数据。

参数: data : ( String ) 必选 要写入的数据内容 返回值:void : 无

这里这个写操作是只能写String格式的,不能写流。

着也就是为啥网上说的那些xlsx.js没法用的原因。

二、知道wps导出xml格式的表格是什么样子的。

在wps里面新建一个表格,自己建俩sheet,然后导出xml看看啥样子。

下面贴一段,可以看到<Worksheet ss:Name="123">就是名字是123的sheet。

是不是恍然大雾了?

<?mso-application progid="Excel.Sheet"?>
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet" xmlns:html="http://www.w3.org/TR/REC-html40" xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
<Author>Administrator</Author>
<LastAuthor>大邦神</LastAuthor>
<Created>2021-11-17T06:06:00Z</Created>
<LastSaved>2021-11-17T06:50:03Z</LastSaved>
</DocumentProperties>
<CustomDocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
<ICV dt:dt="string">A4C20A0DE1DC4E19BBD8138A44B3EF82</ICV>
<KSOProductBuildVer dt:dt="string">2052-11.1.0.11045</KSOProductBuildVer>
</CustomDocumentProperties>
<ExcelWorkbook xmlns="urn:schemas-microsoft-com:office:excel">
<WindowWidth>24225</WindowWidth>
<WindowHeight>12420</WindowHeight>
<ProtectStructure>False</ProtectStructure>
<ProtectWindows>False</ProtectWindows>
</ExcelWorkbook>
<Styles>
<Style ss:ID="Default" ss:Name="Normal">
<Alignment ss:Vertical="Center"/>
<Borders/>
<Font ss:FontName="宋体" x:CharSet="134" ss:Size="11" ss:Color="#000000"/>
<Interior/>
<NumberFormat/>
<Protection/>
</Style>
<Style ss:ID="s49"/>
</Styles>
<Worksheet ss:Name="123">
<Table ss:ExpandedColumnCount="5" ss:ExpandedRowCount="4" x:FullColumns="1" x:FullRows="1" ss:DefaultColumnWidth="54" ss:DefaultRowHeight="13.5">
<Row>
<Cell>
<Data ss:Type="String">的萨芬</Data>
</Cell>
<Cell>
<Data ss:Type="String">第三方的</Data>
</Cell>
<Cell>
<Data ss:Type="String">的</Data>
</Cell>
<Cell>
<Data ss:Type="String">地方</Data>
</Cell>
<Cell>
<Data ss:Type="String"> 但是</Data>
</Cell>
</Row>
<Row>
<Cell>
<Data ss:Type="Number">11</Data>
</Cell>
<Cell>
<Data ss:Type="Number">2321</Data>
</Cell>
<Cell>
<Data ss:Type="Number">12322</Data>
</Cell>
<Cell>
<Data ss:Type="Number">12</Data>
</Cell>
<Cell>
<Data ss:Type="Number">12321</Data>
</Cell>
</Row>
<Row>
<Cell>
<Data ss:Type="String">1ffs</Data>
</Cell>
<Cell>
<Data ss:Type="Number">213</Data>
</Cell>
<Cell>
<Data ss:Type="String">rrrr</Data>
</Cell>
<Cell>
<Data ss:Type="String">dfds</Data>
</Cell>
<Cell>
<Data ss:Type="String">dfddd</Data>
</Cell>
</Row>
<Row>
<Cell>
<Data ss:Type="String">123f</Data>
</Cell>
<Cell>
<Data ss:Type="Number">21321</Data>
</Cell>
<Cell>
<Data ss:Type="String">321rr</Data>
</Cell>
<Cell>
<Data ss:Type="String">dfds</Data>
</Cell>
<Cell>
<Data ss:Type="String">ddd</Data>
</Cell>
</Row>
</Table>
<WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
<PageSetup>
<Header/>
<Footer/>
</PageSetup>
<Selected/>
<TopRowVisible>0</TopRowVisible>
<LeftColumnVisible>0</LeftColumnVisible>
<PageBreakZoom>100</PageBreakZoom>
<Panes>
<Pane>
<Number>3</Number>
<ActiveRow>2</ActiveRow>
<ActiveCol>6</ActiveCol>
<RangeSelection>R3C7</RangeSelection>
</Pane>
</Panes>
<ProtectObjects>False</ProtectObjects>
<ProtectScenarios>False</ProtectScenarios>
</WorksheetOptions>
</Worksheet>
<Worksheet ss:Name="Sheet2">
<Table ss:ExpandedColumnCount="4" ss:ExpandedRowCount="3" x:FullColumns="1" x:FullRows="1" ss:DefaultColumnWidth="54" ss:DefaultRowHeight="13.5">
<Row>
<Cell>
<Data ss:Type="String">的撒</Data>
</Cell>
<Cell>
<Data ss:Type="String">发士大夫</Data>
</Cell>
<Cell>
<Data ss:Type="String">的方式</Data>
</Cell>
<Cell>
<Data ss:Type="String">的方式</Data>
</Cell>
</Row>
<Row>
<Cell>
<Data ss:Type="String">sf</Data>
</Cell>
<Cell>
<Data ss:Type="String">sd</Data>
</Cell>
<Cell>
<Data ss:Type="String">dfs</Data>
</Cell>
<Cell>
<Data ss:Type="String">dfsf</Data>
</Cell>
</Row>
<Row>
<Cell>
<Data ss:Type="String">sf</Data>
</Cell>
<Cell>
<Data ss:Type="String">fds12</Data>
</Cell>
<Cell>
<Data ss:Type="String">fds2</Data>
</Cell>
<Cell>
<Data ss:Type="String">2fff</Data>
</Cell>
</Row>
</Table>
<WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
<PageSetup>
<Header/>
<Footer/>
</PageSetup>
<TopRowVisible>0</TopRowVisible>
<LeftColumnVisible>0</LeftColumnVisible>
<PageBreakZoom>100</PageBreakZoom>
<Panes>
<Pane>
<Number>3</Number>
<ActiveRow>2</ActiveRow>
<ActiveCol>3</ActiveCol>
<RangeSelection>R3C4</RangeSelection>
</Pane>
</Panes>
<ProtectObjects>False</ProtectObjects>
<ProtectScenarios>False</ProtectScenarios>
</WorksheetOptions>
</Worksheet>
</Workbook>

三、组织自己的数据格式进行写文件操作

参考之前写的导出写法uniapp本地导出表格excel组织一下数据

//接受一个对象数组呗,和一个sheet名字
getmodel(res,sheetNmae) {
        let str = res.map(m => {
          let str2 = Object.values(m).map(mp => {
            return `<Cell><Data ss:Type="String">${mp}</Data></Cell>`
          }).join('')
          return `<Row>${str2}</Row>`
        }).join('')
        let str1 = Object.keys(res[0]).map(mp => {
          return `<Cell><Data ss:Type="String">${mp}</Data></Cell>`
        }).join('')
        let t = `<Worksheet ss:Name="${sheetNmae}"><Table><Row>${str1}</Row>${str} </Table></Worksheet>`        
        console.log(t);
        return t
      },
        let time = this.$w.dateFormat("YYYYmmddHHMM", new Date())
        //查出来sheet1的数据
        let ldata = await this.$db.selectDataList("pipe", "line", {}, "", "", this.currentProject.dburl)
        let lmodel = this.getmodel(ldata,"line")
        //查出来sheet2的数据
        let pdata = await this.$db.selectDataList("pipe", "point", {}, "", "", this.currentProject.dburl)
        let pmodel = this.getmodel(pdata,"point")
        
        let template = `<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?>
        <Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
          xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
          <DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
            <Author>Axel Richter</Author>
            <Created>1637042361170</Created>
          </DocumentProperties>
          <Styles>
            <Style ss:ID="Currency">
              <NumberFormat ss:Format="Currency"></NumberFormat>
            </Style>
            <Style ss:ID="Date">
              <NumberFormat ss:Format="Medium Date"></NumberFormat>
            </Style>
          </Styles>
          ${pmodel}${lmodel}
        </Workbook>`
        
        let pres = await me.$fileHandle.writeFile(plus.io.PRIVATE_DOC,
          `${me.currentProject.name}-${time}.xlsx`, template)

根据自己的需要写出来就行了,写文件的操作参考之前写的导出写法uniapp本地导出表格excel

四、思考

  1. xlsx.js是不是在uniapp中的web-view可以使用呢?毕竟是浏览器环境,web-view是不是会唤起一个下载页面去下着生成的xlsx呢?
  2. xml写出的文件比较大,有没有更好的方式,直接用二进制写文件?NativeJS,是不是可以导入原生的读写对象,实现二进制的读写流操作?

相关文章
|
5月前
|
开发框架 资源调度 JavaScript
uniapp本地导出表格excel
uniapp本地导出表格excel
781 1
|
5月前
|
移动开发 小程序 前端开发
uniapp中uview组件库丰富的Table 表格的使用方法
uniapp中uview组件库丰富的Table 表格的使用方法
328 2
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
107 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
47 7
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
66 7
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的成人教育APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
3月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)