&..._vue 前端根据网址打印pdf文件">
devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue 在线访问word,excel,pdf 文件以及打印_vue 前端根据网址打印pdf文件

作者：羊村懒王 | 2024-03-01 09:18:23

赞

踩

vue 前端根据网址打印pdf文件

git 项目代码

一.pdf

1. vue-pdf

安装 

npm i --save vue-pdf

语法

  1. 在组件种使用
  2.  
  3. import pdf from 'vue-pdf'
  4.  
  5.  
  6. pdf.createLoadingTask(url,httpHeaders);
  7.  
  8.  
  9. 参数： url(所请求的接口),headers(请求头信息)
  10. 或者url  是pdf 的链接地址

案例

（1）简单使用

  1. <template>
  2.     <div>
  3.         <pdf ref="pdf" :src="url"> </pdf>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import pdf from "vue-pdf";
  9. export default {
  10.     components: {
  11.         pdf,
  12.     },
  13.     data() {
  14.         return {
  15.             url:"http://image.cache.timepack.cn/nodejs.pdf",
  16.         };
  17.     },
  18.     mounted() {
  19.     },
  20.     methods: {
  21.     },
  22. };

 注意：这个只用于只有一页的文件

（2）分页

  1. <template>
  2.     <div class="pdf">
  3.         <p class="arrow">
  4.             <!-- 上一页 -->
  5.             <span
  6.                 @click="changePdfPage(0)"
  7.                 class="turn"
  8.                 :class="{ grey: currentPage == 1 }"
  9.                 >上一页 </span
  10.             >
  11.             {{ currentPage }} / {{ numPages }}
  12.             <!-- 下一页 -->
  13.             <span
  14.                 @click="changePdfPage(1)"
  15.                 class="turn"
  16.                 :class="{ grey: currentPage == numPages }"
  17.                 >下一页</span
  18.             >
  19.         </p>
  20.         <pdf
  21.             :src="src"
  22.             :page="currentPage"
  23.             @num-pages="numPages = $event"
  24.             @page-loaded="currentPage = $event"
  25.             @loaded="loadPdfHandler"
  26.         >
  27.         </pdf>
  28.     </div>
  29. </template>
  30.  
  31. <script>
  32. import pdf from "vue-pdf";
  33. export default {
  34.     components: { pdf },
  35.     data() {
  36.         return {
  37.             currentPage: 0, // pdf文件页码
  38.             numPages: 0, // pdf文件总页数
  39.             src: "./git使用说明.pdf", // pdf文件地址  
  40.         };
  41.     },
  42.     created() {
  43.         // 请求地址
  44.         var headers = {
  45.             Authorization: "Bearer SOME_TOKEN",
  46.             "x-ipp-device-uuid": "SOME_UUID",
  47.             "x-ipp-client": "SOME_ID",
  48.             "x-ipp-client-version": "SOME_VERSION",
  49.         };
  50.         var loadingTask = pdf.createLoadingTask({
  51.             url: "http://image.cache.timepack.cn/nodejs.pdf",
  52.             httpHeaders: headers,
  53.         });
  54.         this.src = loadingTask;
  55.  
  56.         // 本地 文件放在public 里
  57.         //  this.src = pdf.createLoadingTask(this.src);
  58.     },
  59.     methods: {
  60.         // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
  61.         changePdfPage(val) {
  62.             // console.log(val)
  63.             if (val === 0 && this.currentPage > 1) {
  64.                 this.currentPage--;
  65.             }
  66.             if (val === 1 && this.currentPage < this.numPages) {
  67.                 this.currentPage++;
  68.             }
  69.         },
  70.  
  71.         // pdf加载时
  72.         loadPdfHandler(e) {
  73.             this.currentPage = 1; // 加载的时候先加载第一页
  74.         },
  75.     },
  76. };
  77. </script>
  78.  
  79. <style scoped>
  80. .turn {
  81.     padding: 5px;
  82.     background-color: skyblue;
  83.     border-radius: 5px;
  84.     color: #ffffff;
  85.     cursor: pointer;
  86. }
  87. </style>

（3）请求接口 或者 是外部链接的pdf

  1. <template>
  2.     <div>
  3.         <pdf
  4.             ref="pdf"
  5.             v-for="i in numPages"
  6.             :key="i"
  7.             :src="src"
  8.             :page="i"
  9.             @loaded="docLoaded" 
  10.             @page-loaded ="pageLoaded"
  11.         ></pdf>
  12.     </div>
  13. </template>
  14. <script>
  15. import pdf from "vue-pdf";
  16. export default {
  17.     components: {
  18.         pdf,
  19.     },
  20.     data() {
  21.         return {
  22.             src:"",
  23.             numPages: null, // pdf 总页数
  24.         };
  25.     },
  26.     mounted() {
  27.         this.getNumPages();
  28.     },
  29.     methods: {
  30.         getNumPages() {
  31.             var headers = {
  32.                 Authorization: "Bearer SOME_TOKEN",
  33.                 "x-ipp-device-uuid": "SOME_UUID",
  34.                 "x-ipp-client": "SOME_ID",
  35.                 "x-ipp-client-version": "SOME_VERSION",
  36.             };
  37.             var loadingTask = pdf.createLoadingTask({
  38.                 url: "http://image.cache.timepack.cn/nodejs.pdf",
  39.                 httpHeaders: headers,
  40.             });
  41.             loadingTask.promise
  42.                 .then((pdf) => {
  43.                     console.log('11',pdf)
  44.                     this.src=loadingTask;
  45.                     this.numPages = pdf.numPages;
  46.                 })
  47.                 .catch((err) => {
  48.                     console.error("pdf 加载失败", err);
  49.                 });
  50.         },
  51.         docLoaded(){
  52.             console.log('加载种')
  53.         },
  54.         pageLoaded(){
  55.             console.log('加载结束')
  56.         }
  57.     },
  58. };
  59. </script>

（4）分页

  1. <template>
  2.     <div class="pdf">
  3.         <p class="arrow">
  4.             <!-- 上一页 -->
  5.             <span
  6.                 @click="changePdfPage(0)"
  7.                 class="turn"
  8.                 :class="{ grey: currentPage == 1 }"
  9.                 >上一页 </span
  10.             >
  11.             {{ currentPage }} / {{ numPages }}
  12.             <!-- 下一页 -->
  13.             <span
  14.                 @click="changePdfPage(1)"
  15.                 class="turn"
  16.                 :class="{ grey: currentPage == numPages }"
  17.                 >下一页</span
  18.             >
  19.         </p>
  20.         <pdf
  21.             :src="src"
  22.             :page="currentPage"
  23.             @num-pages="numPages = $event"
  24.             @page-loaded="currentPage = $event"
  25.             @loaded="loadPdfHandler"
  26.         >
  27.         </pdf>
  28.     </div>
  29. </template>
  30.  
  31. <script>
  32. import pdf from "vue-pdf";
  33. export default {
  34.     components: { pdf },
  35.     data() {
  36.         return {
  37.             currentPage: 0, // pdf文件页码
  38.             numPages: 0, // pdf文件总页数
  39.             src: "./git使用说明.pdf", // pdf文件地址  
  40.         };
  41.     },
  42.     created() {
  43.         // 请求地址
  44.         var headers = {
  45.             Authorization: "Bearer SOME_TOKEN",
  46.             "x-ipp-device-uuid": "SOME_UUID",
  47.             "x-ipp-client": "SOME_ID",
  48.             "x-ipp-client-version": "SOME_VERSION",
  49.         };
  50.         var loadingTask = pdf.createLoadingTask({
  51.             url: "http://image.cache.timepack.cn/nodejs.pdf",
  52.             httpHeaders: headers,
  53.         });
  54.         this.src = loadingTask;
  55.  
  56.         // 本地 文件放在public 里
  57.         //  this.src = pdf.createLoadingTask(this.src);
  58.     },
  59.     methods: {
  60.         // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
  61.         changePdfPage(val) {
  62.             // console.log(val)
  63.             if (val === 0 && this.currentPage > 1) {
  64.                 this.currentPage--;
  65.             }
  66.             if (val === 1 && this.currentPage < this.numPages) {
  67.                 this.currentPage++;
  68.             }
  69.         },
  70.  
  71.         // pdf加载时
  72.         loadPdfHandler(e) {
  73.             this.currentPage = 1; // 加载的时候先加载第一页
  74.         },
  75.     },
  76. };
  77. </script>
  78.  
  79. <style scoped>
  80. .turn {
  81.     padding: 5px;
  82.     background-color: skyblue;
  83.     border-radius: 5px;
  84.     color: #ffffff;
  85.     cursor: pointer;
  86. }
  87. </style>

（5）vue-pdf 打印

  1. <template>
  2.     <div>
  3.         <pdf ref="pdf" :src="url"> </pdf>
  4. <button type="primary"  @click="print">打印</a-button>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. import pdf from "vue-pdf";
  10. export default {
  11.     components: {
  12.         pdf,
  13.     },
  14.     data() {
  15.         return {
  16.             url:"http://image.cache.timepack.cn/nodejs.pdf",
  17.         };
  18.     },
  19.     mounted() {
  20.     },
  21.     methods: {
  22.         print() {
  23.           this.$refs.pdf.print()
  24.         },
  25.     },
  26. };

（6）vue-pdf预览base64数据为pdf

使用CMapReaderFactory

  1. 1.引入
  2.  
  3. import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
  4.  
  5. 2.重置一下pdf文件
  6.  
  7. this.pdfUrl = pdf.createLoadingTask({ url: res.data.datas.invoicePicUrl, CMapReaderFactory })

2. pdfjs

官网下载压缩包（下载稳定版）

使用

  1. 1. 使用 文件解压 放在public/static/pdf
  2.  
  3. 2.vue 访问viewer.html时404 时
  4.    const path = require('path')
  5. // const CompressionPlugin = require("compression-webpack-plugin")
  6. function resolve(dir) {
  7. 	return path.join(__dirname, dir)
  8. }
  9.  
  10. module.exports = {
  11.     chainWebpack: (config) => {
  12.         config.resolve.alias.set('static',resolve('public/static'))
  13.       }
  14. };
  15.  
  16.  
  17. 3. 组件上使用
  18.  
  19. 	 <iframe
  20.             :src="'/static/pdf/web/viewer.html?file='+url"
  21.             scrolling="no"
  22.             style="width: 100%; height: 800px"
  23.             frameborder="0"
  24.         ></iframe>
  25.  
  26.    url:'./git使用说明.pdf'
  27.

 

 3.  HTML网页生成图片

 npm install --save html2canvas

使用

（1）.封装组件

  1. // 导出页面为图片
  2. import html2Canvas from 'html2canvas'
  3. export default {
  4.     install(Vue, options) {
  5.         Vue.prototype.getImage = function (id, title) {
  6.             return new Promise((resolve, reject) => {
  7.                 html2Canvas(document.querySelector(`#${id}`), {
  8.                     allowTaint: true
  9.                 }).then(function (canvas) {
  10.                     let contentWidth = canvas.width
  11.                     let contentHeight = canvas.height
  12.                     let pageHeight = contentWidth / 592.28 * 841.89
  13.                     let leftHeight = contentHeight
  14.                     let position = 0
  15.                     let imgWidth = 595.28
  16.                     let imgHeight = 592.28 / contentWidth * contentHeight
  17.                     let pageData = canvas.toDataURL('image/jpeg', 1.0)
  18.                     resolve(pageData)
  19.                 })
  20.             })
  21.         }
  22.     }
  23. }

 （2）.使用

  1. <template>
  2.     <div>
  3.         <button @click="pdfFn">导出PDF</button>
  4.         <img :src="url" class="img" />
  5.         <div id="pdfDom" style="padding-top: 55px; background-color: #fff">
  6.             <h1>vue HTML网页生成PDF格式</h1>
  7.             <p>
  8.                 大概思路 => 就是将页面转换成图片格式 .然后通过图片的base64码
  9.                 生成PDF格式 保存到本地。
  10.             </p>
  11.             <div>
  12.                 <p>需要两个插件：</p>
  13.                 ​ npm install --save html2canvas<br />
  14.                 npm install jspdf --save
  15.             </div>
  16.         </div>
  17.     </div>
  18. </template>
  19.  
  20. <script>
  21. export default {
  22.     data() {
  23.         return {
  24.             htmlTitle: "html导出PDF",
  25.             url: "",
  26.         };
  27.     },
  28.     methods: {
  29.         async pdfFn() {
  30.             this.url = await this.getImage("pdfDom", this.htmlTitle);
  31.         },
  32.     },
  33. };
  34. </script>
  35.  
  36. <style>
  37. .img {
  38.     width: 800px;
  39.     border: 1px solid #ccc;
  40.     padding: 10px;
  41.     display: block;
  42.     margin: 10px auto;
  43. }
  44. </style>

4.  HTML网页生成PDF格式

大概思路 => 就是将页面转换成图片格式 .然后通过图片的base64码 生成PDF格式 保存到本地。

需要两个插件：  

 npm install --save html2canvas

npm install jspdf --save 

使用

（1）.封装组件

  1. // 导出页面为PDF格式
  2. import html2Canvas from 'html2canvas'
  3. import JsPDF from 'jspdf'
  4. export default {
  5.     install(Vue, options) {
  6.         Vue.prototype.getPdf = function (id, title) {
  7.             html2Canvas(document.querySelector(`#${id}`), {
  8.                 allowTaint: true
  9.             }).then(function (canvas) {
  10.                 let contentWidth = canvas.width
  11.                 let contentHeight = canvas.height
  12.                 let pageHeight = contentWidth / 592.28 * 841.89
  13.                 let leftHeight = contentHeight
  14.                 let position = 0
  15.                 let imgWidth = 595.28
  16.                 let imgHeight = 592.28 / contentWidth * contentHeight
  17.                 let pageData = canvas.toDataURL('image/jpeg', 1.0)
  18.                 let PDF = new JsPDF('', 'pt', 'a4')
  19.                 if (leftHeight < pageHeight) {
  20.                     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
  21.                 } else {
  22.                     while (leftHeight > 0) {
  23.                         PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
  24.                         leftHeight -= pageHeight
  25.                         position -= 841.89
  26.                         if (leftHeight > 0) {
  27.                             PDF.addPage()
  28.                         }
  29.                     }
  30.                 }
  31.                 PDF.save(title + '.pdf')
  32.             }
  33.             )
  34.         }
  35.     }
  36. }

（2）.注册

main.js

  1. import htmlToPdf from '@/utils/htmlToPdf'
  2. Vue.use(htmlToPdf)

（3）.组件

  1. <template>
  2.     <div>
  3.         <button @click="pdfFn">导出PDF</button>
  4.         <div id="pdfDom" style="padding-top: 55px; background-color: #fff">
  5.             <h1>vue HTML网页生成PDF格式</h1>
  6.             <p>
  7.                 大概思路 => 就是将页面转换成图片格式 .然后通过图片的base64码
  8.                 生成PDF格式 保存到本地。
  9.             </p>
  10.         </div>
  11.     </div>
  12. </template>
  13.  
  14. <script>
  15. export default {
  16.     data() {
  17.         return {
  18.             htmlTitle: "html导出PDF",
  19.         };
  20.     },
  21.     methods: {
  22.         pdfFn() {
  23.             this.getPdf("pdfDom", this.htmlTitle);
  24.         },
  25.     },
  26. };
  27. </script>

二.word

Mammoth 旨在将 word文档 将其转换为 HTML。Mammoth 的目标是通过使用文档中的语义信息并忽略其他细节来生成简单干净的 HTML。

Mammoth.js 这个库同时支持 Node.js 和浏览器两个平台。

安装

npm install --save mammoth

常用的 API

  1. 1. mammoth.convertToHtml(input, options：把源文档转换为 HTML 文档
  2.  
  3.  
  4. mammoth.convertToHtml(input, options) 将源文档转换为 HTML input: 描述源文档的对象。 在
  5.  
  6. node.js 上，支持以下输入： {path: path}，其中 path 是. docx 文件的路径。 {buffer:
  7.  
  8. buffer}，其中 buffer 是包含. docx 文件的node.js 缓冲区。 在浏览器中，支持以下输入：
  9.  
  10. {arrayBuffer: arrayBuffer}，其中 arrayBuffer 是包含. docx 文件的array 缓冲区。
  11.  
  12. options ( 可选): 转换的选项。 浏览器表示支持arrayBuffer 转换也仅仅支持docx
  13.  
  14. 只能预览.docx文件不能预览doc文件
  15.  
  16.  
  17. 2. mammoth.convertToMarkdown(input, options)：把源文档转换为 Markdown 文档。这个方法与 convertToHtml 方法类似，区别就是返回的 result 对象的 value 属性是 Markdown 而不是 HTML。
  18.  
  19.  
  20. 3. mammoth.extractRawText(input)：提取文档的原始文本。这将忽略文档中的所有格式。每个段落后跟两个换行符。

注意 

1.docx可以解析,doc 不行

2.只能适应于 结构简单word文件

    docx使用的结构和HTML的结构之间存在很大的不匹配，这意味着转换不太可能适合更复杂的文档。如果只使用样式对文档进行语义标记，那么Mammoth的效果最好。

    eg:标题，图片，粗体、斜体、下划线、删除线、上标和下。。。。

3. 直接访问本地的文件地址，或是线上的地址，如下操作，会报错”Could not find file in options “，不懂是为啥，有待研究

  1. mammoth.convertToHtml({path: "E:\gitProgram\gitee\vue-pdf-word\public\words.docx"})
  2.         .then(function (resultObject) {
  3. 		   vm.vHtml =resultObject.value;
  4. 		});
  5.         .done();

4.  服务端请求接口下载文件，在放到mammoth.convertToHtml({arrayBuffer: new Uint8Array(xhr.response)})转换得到值 

案例

（1）开发方式：服务端请求接口下载文件，在放到mammoth.convertToHtml({arrayBuffer: new Uint8Array(xhr.response)})转换得到值

  1.  <template>
  2.     <div>
  3.         <div id="wordView" v-html="vHtml" />
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import mammoth from "mammoth";
  9. export default {
  10.     name: "word",
  11.     data() {
  12.         return {
  13.             vHtml: "",
  14.             wordURL: "", //文件地址
  15.         };
  16.     },
  17.     created() {
  18.         let vm = this;
  19.         vm.wordURL = "http://localhost/dev-api/common/download?fileName=/profile/upload/2021/03/29/000b83ee-0fb1-46a6-8d15-addaa9bd5b7f.docx&delete=false";
  20.         const xhr = new XMLHttpRequest();
  21.         xhr.open("get", this.wordURL, true);
  22.         xhr.responseType = "arraybuffer";
  23.         xhr.onload = function () {
  24.             if (xhr.status == 200) {
  25.                 mammoth
  26.                     .convertToHtml({
  27.                         arrayBuffer: new Uint8Array(xhr.response),
  28.                     })
  29.                     .then(function (resultObject) {
  30.                        vm.vHtml =resultObject.value;
  31.                     });
  32.             }
  33.         };
  34.         xhr.send();
  35.     },
  36.     methods: {},
  37. };
  38. </script>
  39.  
  40. <style>
  41. </style>

（2）.官网提供的操作

input【type=“file”】

三.excel

(一) 理解

由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库，功能强大，支持格式众多，支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。

官网

(二) 安装

npm install -S xlsx //导出excel

npm install -S xlsx-style // 设置excel的样式

npm install -S file-saver //用来生成文件的web应用程序

(三) 使用

import FileSaver from 'file-saver';

import * as XLSX from 'xlsx';

import XLSXStyle from 'xlsx-style';

(四) 兼容

支持 ES5 的浏览器，如果是比较老的浏览器，需要引入 polyfill

(五) 常用api

（1）读取excel  XLSX.read(data, {type: type})

  1. 读取excel主要是通过XLSX.read(data, {type: type});方法来实现，返回一个叫WorkBook的对象，type主要取值如下：
  2.  
  3.     base64: 以base64方式读取；
  4.     binary: BinaryString格式(byte n is data.charCodeAt(n))
  5.     string: UTF8编码的字符串；
  6.     buffer: nodejs Buffer；
  7.     array: Uint8Array，8位无符号数组；
  8.     file: 文件的路径（仅nodejs下支持）；

（2）详解 workbook

可以理解为XLSX对excel文件描述的一个对象，可通过 XLSX.utils.book()来创建，该方法返回workbook对象

构建workbook对象

 let elt = document.getElementById('exportTable');

 let wb = XLSX.utils.table_to_book(elt, {

                sheet: 'Sheet JS',

                raw: true

            });

1. Workbook Object

workbook里面有什么东西呢，我们打印出来看一下：

可以看到，SheetNames里面保存了所有的sheet名字，然后Sheets则保存了每个sheet的具体内容（我们称之为Sheet Object）。每一个sheet是通过类似A1这样的键值保存每个单元格的内容，我们称之为单元格对象（Cell Object）：

2. Worksheet对象(Sheet Object)

每一个Sheet Object表示一张表格，只要不是!开头的都表示普通cell，否则，表示一些特殊含义，具体如下：

  • sheet['!ref']：表示excel的渲染区域 (所有单元格的范围)，例如从A1到E3则记录为A1:E3； 

  • sheet[!merges]：合并单元格 : 存放一些单元格合并信息，是一个数组，每个数组由包含s和e构成的对象组成，s表示开始，e表示结束，r表示行，c表示列；

关于单元格合并，看懂下面这张图基本上就没问题了：

结果如下：

分析：：{c:0,r:0} 表示第一行   e:{c：5：r：0} 第6列  

  • sheet['!cols]: 设置列宽（列属性对象的数组）列宽实际上是以规范化的方式存储在文件中的，以“最大位数宽度”（呈示的数字0-9的最大宽度，以像素为单位）衡量

<el-table id="exportTable" v-loading="loading" :data="tableList" ></el-table>

// 1. 获取数据（引用 HTML 表格）
let elt = document.getElementById('exportTable');
// 2. 提取数据（从表中创建一个工作簿对象）
let wb = XLSX.utils.table_to_book(elt, {
    sheet: 'Sheet JS',
    raw: true
});

let range = XLSX.utils.decode_range(wb.Sheets['Sheet JS']['!ref']);
for (let C = range.s.c; C <= range.e.c; ++C) {
    for (let R = range.s.r; R <= range.e.r; ++R) {
        //每个单元格的样式 固定 宽度
        wb.Sheets['Sheet JS']['!cols'].push({
            wpx: 150
        });
    }
} 

  • sheet['!rows]: 设置行高:[{hpx:40}]
  • !printHeader:打印的时候要重复的行，比如 table 的表头信息    [1:1] // 重复第一行

3. 单元格对象

可以使用单元格对象来实现对单元格样式对修改,最终导出是一定要使用xlsx-style的方法导出

 单元格样式 

在 xlsx-style 中，单元格样式共有五个顶级的属性，分别是：fill, font, numFmt, alignment 和 border 

  1. let range = XLSX.utils.decode_range(wb.Sheets['Sheet JS']['!ref']);
  2. for (let C = range.s.c; C <= range.e.c; ++C) {
  3. 	for (let R = range.s.r; R <= range.e.r; ++R) {
  4. 		// 7.  每个单元格的样式
  5. 		if (wb.Sheets['Sheet JS'][cell_ref]) {
  6. 			// 每个单元格的样式
  7. 			wb.Sheets['Sheet JS'][cell_ref].s = {
  8. 				font: {
  9. 					// 字体设置
  10. 					sz: 12,
  11. 					bold: false,
  12. 					color: {
  13. 						rgb: '000000' // 十六进制，不带#
  14. 					}
  15. 				},
  16. 				alignment: {
  17. 					// 文字居中
  18. 					horizontal: 'center',
  19. 					vertical: 'center',
  20. 					wrapText: true // 换行
  21. 				},
  22. 				border: {
  23. 					// 设置边框
  24. 					top: {
  25. 						style: 'thin'
  26. 					},
  27. 					bottom: {
  28. 						style: 'thin'
  29. 					},
  30. 					left: {
  31. 						style: 'thin'
  32. 					},
  33. 					right: {
  34. 						style: 'thin'
  35. 					}
  36. 				}
  37. 			};
  38. 		}
  39. 	}
  40. }

4. 读取workbook

普通方法：

  1. // 读取 excel文件
  2. function outputWorkbook(workbook) {
  3. 	var sheetNames = workbook.SheetNames; // 工作表名称集合
  4. 	sheetNames.forEach(name => {
  5. 		var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
  6. 		for(var key in worksheet) {
  7. 			// v是读取单元格的原始值
  8. 			console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
  9. 		}
  10. 	});
  11. }

根据!ref确定excel的范围，再根据!merges确定单元格合并（如果有），最后输出整个table，比较麻烦，幸运的是，插件自身已经写好工具类XLSX.utils给我们直接使用，无需我们自己遍历，工具类输出主要包括如下：

有些不常用，常用的主要是：

  1. XLSX.utils.sheet_to_csv：生成CSV格式
  2. XLSX.utils.sheet_to_txt：生成纯文本格式
  3. XLSX.utils.sheet_to_html：生成HTML格式
  4. XLSX.utils.sheet_to_json：输出JSON格式

常用的主要是sheet_to_csv或者sheet_to_html，转csv的话会忽略格式、单元格合并等信息，所以复杂表格可能不适用。转html的话会保留单元格合并，但是生成的是<html></html>代码，而不是<table></table>，需要对表格进行一些定制时不太方便，所以具体还是要视情况来采用合适的工具类。

这里写一个采用转csv方式输出结果的简单示例，可点击这里查看在线DEMO：

  1. function readWorkbook(workbook)
  2. {
  3. 	var sheetNames = workbook.SheetNames; // 工作表名称集合
  4. 	var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
  5. 	var csv = XLSX.utils.sheet_to_csv(worksheet);
  6. 	document.getElementById('result').innerHTML = csv2table(csv);
  7. }
  8.  
  9. // 将csv转换成简单的表格，会忽略单元格合并，在第一行和第一列追加类似excel的索引
  10. function csv2table(csv)
  11. {
  12. 	var html = '<table>';
  13. 	var rows = csv.split('\n');
  14. 	rows.pop(); // 最后一行没用的
  15. 	rows.forEach(function(row, idx) {
  16. 		var columns = row.split(',');
  17. 		columns.unshift(idx+1); // 添加行索引
  18. 		if(idx == 0) { // 添加列索引
  19. 			html += '<tr>';
  20. 			for(var i=0; i<columns.length; i++) {
  21. 				html += '<th>' + (i==0?'':String.fromCharCode(65+i-1)) + '</th>';
  22. 			}
  23. 			html += '</tr>';
  24. 		}
  25. 		html += '<tr>';
  26. 		columns.forEach(function(column) {
  27. 			html += '<td>'+column+'</td>';
  28. 		});
  29. 		html += '</tr>';
  30. 	});
  31. 	html += '</table>';
  32. 	return html;
  33. }

（六）某小点

（1）大多数涉及表格和数据的场景

//1. 获取数据：引用 HTML 表格
var table_elt = document.getElementById("my-table-id");

// 2.提取数据（从表中创建一个工作簿对象）
var workbook = XLSX.utils.table_to_book(table_elt);

// 3.处理数据：从生成汇总统计数据到清理数据记录，这一步是问题的核心。
var ws = workbook.Sheets["Sheet1"];
XLSX.utils.sheet_add_aoa(ws, [["Created "+new Date().toISOString()]], {origin:-1});

// 4. 发布数据：电子表格文件可以上传到服务器或本地写入。数据可以在 HTML TABLE 或数据网格中呈现给用户
XLSX.writeFile(workbook, "Report.xlsx");

注意：使用XLSXStyle时

  // 文件存在本地

            var wopts = {

                bookType: 'xlsx', // 要生成的文件类型

                bookSST: false, 

                type: 'binary'

            };

            var wbout = XLSX.write(wb, wopts);

（2）单元格转化方法（由A1转化成{c:C, r:R}，c为列，r为行）

excel中 列以 A开始，行以1开始，在XLSX中转化为数值后行与列都是0开始

  • encode_cell / decode_cell 转化单元格号

由于解析的单元格是A1形式，无法直接获取行列，需要转化为XLSX中的数值（如：{c:0,r:0}）

  1. XLSX.utils.encode_cell({c:0,r:0}) // A1
  2. XLSX.utils.decode_cell('A2') //{c: 0, r: 1}

  • encode_row / decode_row 转化行号 =>r的值

  1. XLSX.utils.encode_row(1)  // 2
  2. XLSX.utils.decode_row('1')  // 0

  • encode_col / decode_col 转化列号 =>c的值

  1. console.log(XLSX.utils.encode_col(1))  // B
  2. console.log(XLSX.utils.decode_col('A'))  // 0

（3）单元格合并(范围) 

encode_range / decode_range 转化表格范围 （如A1:B2 互相转化 {s: {c: 0, r: 0},e: {c: 1, r: 1}}）

在解析出来的数据中，单元格合并由属性 !merges 表示（s：start，e：end）

遍历单元格范围（range={s:{c:C, r:R}, e:{c:C, r:R}} ）

 for(var R = range.s.r; R <= range.e.r; ++R) {
  for(var C = range.s.c; C <= range.e.c; ++C) {
    var cell_address = {c:C, r:R};
    /* if an A1-style address is needed, encode the address */
    var cell_ref = XLSX.utils.encode_cell(cell_address);
  }
}

table中 合并行和列

  1. let range = XLSX.utils.decode_range(wb.Sheets['Sheet JS']['!ref']);
  2. for (let C = range.s.c; C <= range.e.c; ++C) {
  3. 	for (let R = range.s.r; R <= range.e.r; ++R) {
  4. 		let cell = { c: C, r: R };
  5. 		let cell_ref = XLSX.utils.encode_cell(cell);
  6. 		if (wb.Sheets['Sheet JS']['!merges']) {
  7. 			// 合并单元格判断
  8. 			wb.Sheets['Sheet JS']['!merges'].forEach(item => {
  9. 				if (item.e.r == item.s.r && item.e.c != item.s.c) {
  10. 					// 列合并
  11. 					let R = item.s.r;
  12. 					for (let i = item.s.c; i <= item.e.c; i++) {
  13. 						let cell_1 = { c: i, r: R };
  14. 						let cell_ref1 =
  15. 							XLSX.utils.encode_cell(cell_1);
  16. 						if (!wb.Sheets['Sheet JS'][cell_ref1]) {
  17. 							wb.Sheets['Sheet JS'][cell_ref1] = {
  18. 								t: 's',
  19. 								v: ''
  20. 							};
  21. 						}
  22. 					}
  23. 				} else if (
  24. 					item.e.c == item.s.c &&
  25. 					item.e.r != item.s.r
  26. 				) {
  27. 					// 行合并
  28. 					let C = item.s.c;
  29. 					for (let i = item.s.r; i <= item.e.r; i++) {
  30. 						let cell2 = { c: C, r: i };
  31. 						let cell_ref2 =
  32. 							XLSX.utils.encode_cell(cell2);
  33. 						if (!wb.Sheets['Sheet JS'][cell_ref2]) {
  34. 							wb.Sheets['Sheet JS'][cell_ref2] = {
  35. 								t: 's',
  36. 								v: ''
  37. 							};
  38. 						}
  39. 					}
  40. 				}
  41. 			});
  42. 		}
  43. 	}
  44. }

（4）拆分单元格

拆分单元格：根据已知要拆分位置，转为坐标然后遍历"!merges"数组，删除匹配的项目就完成已合并表格的删除（如：合计占了多行， 判断excle里的坐标 行数 是不是大于 实际行数，如果大于的话，就拆了）

 

 

 // 1. 获取数据（引用 HTML 表格）
let elt = document.getElementById('exportTable');
// 2. 提取数据（从表中创建一个工作簿对象）
let wb = XLSX.utils.table_to_book(elt, {
    sheet: 'Sheet JS',
    raw: true
});

var row_count = 0;
let ref = wb.Sheets['Sheet JS']['!ref'];
let s_e = ref.split(':');
row_count = this.getRowFromId(s_e[1]) + 1;
// 对特殊数据的拆分(如：合计 总数量）
let merges = wb.Sheets['Sheet JS']['!merges'];
if (merges) {
    for (var j = 0; j < merges.length; j++) {
        var srcmerge = merges[j];
        // 获取最后一行的r的值
        var row = XLSX.utils.encode_row(row_count - 2);
        if (srcmerge.s.r == row && srcmerge.e.r > row) {
            //结束的行数 = 开始的行数
            srcmerge.e.r = Number(row);
        }
    }
}


 // 获取excel行的行数
getRowFromId(str) {
    var reg = /(\d+)/g;
    var result = reg.exec(str);
    return parseInt(result[0]) - 1;
},

 

 （5）插入/删除行和列

首先扩展行和列，直接操作"!ref"字段，然后把所选中行列之后的数据全部后移。

简单的列子，删除最后一列

// 1. 获取数据（引用 HTML 表格）
let elt = document.getElementById('exportTable');
// 2. 提取数据（从表中创建一个工作簿对象）
let wb = XLSX.utils.table_to_book(elt, {
    sheet: 'Sheet JS',
    raw: true
});
// 3.  删除最后一列
var row_count = 0;
var colums_count = 0;
let ref = wb.Sheets['Sheet JS']['!ref'];
let s_e = ref.split(':');
row_count = this.getRowFromId(s_e[1]) + 1;
colums_count = this.getIndexFromId(s_e[1]) + 1;
wb.Sheets['Sheet JS']['!ref'] =
    'A1:' + this.letters[colums_count - 2] + String(row_count);
    
    
// 获取excel列的坐标
getIndexFromId(str) {
    var reg = /([A-Z]+)/g;
    var result = reg.exec(str);
    return this.letters.indexOf(result[0]);
},
// 获取excel行的行数
getRowFromId(str) {
    var reg = /(\d+)/g;
    var result = reg.exec(str);
    return parseInt(result[0]) - 1;
},

注意：如要看插入/删除行和列 请看：sheetjs前段操作excel,点击合并拆分表格增删行列功能实现​​​​​​​ 

（七）案例

（1）把html中的table 导出excel

 index.vue

  1. <el-button
  2. 		type="warning"
  3. 		plain
  4. 		icon="el-icon-download"
  5. 		size="mini"
  6. 		@click="handleExport('业务细类统计分析')"
  7. 	>
  8. 		导出
  9. 	</el-button>
  10. <el-table
  11. 		id="exportTable"
  12. 		v-loading="loading"
  13. 		:data="tableList"
  14. 		show-summary
  15. 		:summary-method="getSummaries"
  16. 	>
  17. 		<el-table-column
  18. 			v-for="(item, index) in tableHead"
  19. 			:key="index"
  20. 			:label="item.label"
  21. 			align="center"
  22. 		>
  23. 			<el-table-column
  24. 				v-for="el in item.children"
  25. 				:key="el.id"
  26. 				:label="el.label"
  27. 				align="center"
  28. 			>
  29. 				<el-table-column
  30. 					v-for="row in el.children"
  31. 					:key="row.id"
  32. 					:prop="row.prop"
  33. 					:label="row.label"
  34. 					align="center"
  35. 					width="120"
  36. 				/>
  37. 			</el-table-column>
  38. 		</el-table-column>
  39. </el-table>
  40. import { tableExcel } from '@/mixins/tableExcel.js';
  41. export default {
  42. 	mixins: [tableExcel],
  43. 	data() {
  44. 		return {
  45. 			// 遮罩层
  46. 			loading: true,
  47. 			total: 0,
  48. 			tableList: [],//table的数据
  49. 			tableHead: [],//表头的字段
  50. 			queryParams: {
  51. 				pageNum: 1,
  52. 				pageSize: 50,
  53. 				starTime: undefined,
  54. 				endTime: undefined
  55. 			},
  56. 		};
  57. 	},
  58. }

mixins/tableExcel.js

  1. import FileSaver from 'file-saver';
  2. import { Loading } from 'element-ui';
  3. import * as XLSX from 'xlsx';
  4. import XLSXStyle from 'xlsx-style';
  5. let downloadLoadingInstance;
  6. export const tableExcel = {
  7.     data() {
  8.         return {
  9.             pageLoading: false,
  10.             // EXCEL 列的坐标
  11.             letters: [
  12.                 'A',
  13.                 'B',
  14.                 'C',
  15.                 'D',
  16.                 'E',
  17.                 'F',
  18.                 'G',
  19.                 'H',
  20.                 'I',
  21.                 'J',
  22.                 'K',
  23.                 'L',
  24.                 'M',
  25.                 'N',
  26.                 'O',
  27.                 'P',
  28.                 'Q',
  29.                 'R',
  30.                 'S',
  31.                 'T',
  32.                 'U',
  33.                 'V',
  34.                 'W',
  35.                 'X',
  36.                 'Y',
  37.                 'Z',
  38.                 'AA',
  39.                 'AB',
  40.                 'AC',
  41.                 'AD',
  42.                 'AE',
  43.                 'AF',
  44.                 'AG',
  45.                 'AH',
  46.                 'AI',
  47.                 'AJ',
  48.                 'AK',
  49.                 'AL',
  50.                 'AM',
  51.                 'AN',
  52.                 'AO',
  53.                 'AP',
  54.                 'AQ',
  55.                 'AR',
  56.                 'AS',
  57.                 'AT',
  58.                 'AU',
  59.                 'AV',
  60.                 'AW',
  61.                 'AX',
  62.                 'AY',
  63.                 'AZ',
  64.                 'BA',
  65.                 'BB',
  66.                 'BC',
  67.                 'BD',
  68.                 'BE',
  69.                 'BF',
  70.                 'BG',
  71.                 'BH',
  72.                 'BI',
  73.                 'BJ',
  74.                 'BK',
  75.                 'BL',
  76.                 'BM',
  77.                 'BN',
  78.                 'BO',
  79.                 'BP',
  80.                 'BQ',
  81.                 'BR',
  82.                 'BS',
  83.                 'BT',
  84.                 'BU',
  85.                 'BV',
  86.                 'BW',
  87.                 'BX',
  88.                 'BY',
  89.                 'BZ',
  90.                 'CA',
  91.                 'CB',
  92.                 'CC',
  93.                 'CD',
  94.                 'CE',
  95.                 'CF',
  96.                 'CG',
  97.                 'CH',
  98.                 'CI',
  99.                 'CJ',
  100.                 'CK',
  101.                 'CL',
  102.                 'CM',
  103.                 'CN',
  104.                 'CO',
  105.                 'CP',
  106.                 'CQ',
  107.                 'CR',
  108.                 'CS',
  109.                 'CT',
  110.                 'CU',
  111.                 'CV',
  112.                 'CW',
  113.                 'CX',
  114.                 'CY',
  115.                 'CZ'
  116.             ]
  117.         };
  118.     },
  119.     methods: {
  120.         // 获取excel列的坐标
  121.         getIndexFromId(str) {
  122.             var reg = /([A-Z]+)/g;
  123.             var result = reg.exec(str);
  124.             return this.letters.indexOf(result[0]);
  125.         },
  126.         // 获取excel行的行数
  127.         getRowFromId(str) {
  128.             var reg = /(\d+)/g;
  129.             var result = reg.exec(str);
  130.             return parseInt(result[0]) - 1;
  131.         },
  132.         // 对数据的处理 导出excel
  133.         excelFn(fileName) {
  134.             // 1. 获取数据（引用 HTML 表格）
  135.             let elt = document.getElementById('exportTable');
  136.             // 2. 提取数据（从表中创建一个工作簿对象）
  137.             let wb = XLSX.utils.table_to_book(elt, {
  138.                 sheet: 'Sheet JS',
  139.                 raw: true
  140.             });
  141.             // 3.  删除多出来的最后一列
  142.             var row_count = 0;
  143.             var colums_count = 0;
  144.             let ref = wb.Sheets['Sheet JS']['!ref'];
  145.             let s_e = ref.split(':');
  146.             row_count = this.getRowFromId(s_e[1]) + 1;
  147.             colums_count = this.getIndexFromId(s_e[1]) + 1;
  148.             wb.Sheets['Sheet JS']['!ref'] =
  149.                 'A1:' + this.letters[colums_count - 2] + String(row_count);
  150.             // 4. 对特殊数据的 拆分合计
  151.             let merges = wb.Sheets['Sheet JS']['!merges'];
  152.             if (merges) {
  153.                 for (var j = 0; j < merges.length; j++) {
  154.                     var srcmerge = merges[j];
  155.                     // 最后一行
  156.                     var row = XLSX.utils.encode_row(row_count - 2);
  157.                     if (srcmerge.s.r == row && srcmerge.e.r > row) {
  158.                         srcmerge.e.r = Number(row);
  159.                     }
  160.                 }
  161.             }
  162.             console.log(wb);
  163.             // 5. 合并单元格
  164.             let range = XLSX.utils.decode_range(wb.Sheets['Sheet JS']['!ref']);
  165.             for (let C = range.s.c; C <= range.e.c; ++C) {
  166.                 for (let R = range.s.r; R <= range.e.r; ++R) {
  167.                     let cell = { c: C, r: R };
  168.                     let cell_ref = XLSX.utils.encode_cell(cell);
  169.                     if (wb.Sheets['Sheet JS']['!merges']) {
  170.                         // 合并单元格判断
  171.                         wb.Sheets['Sheet JS']['!merges'].forEach(item => {
  172.                             if (item.e.r == item.s.r && item.e.c != item.s.c) {
  173.                                 // 列合并
  174.                                 let R = item.s.r;
  175.                                 for (let i = item.s.c; i <= item.e.c; i++) {
  176.                                     let cell_1 = { c: i, r: R };
  177.                                     let cell_ref1 =
  178.                                         XLSX.utils.encode_cell(cell_1);
  179.                                     if (!wb.Sheets['Sheet JS'][cell_ref1]) {
  180.                                         wb.Sheets['Sheet JS'][cell_ref1] = {
  181.                                             t: 's',
  182.                                             v: ''
  183.                                         };
  184.                                     }
  185.                                 }
  186.                             } else if (
  187.                                 item.e.c == item.s.c &&
  188.                                 item.e.r != item.s.r
  189.                             ) {
  190.                                 // 行合并
  191.                                 let C = item.s.c;
  192.                                 for (let i = item.s.r; i <= item.e.r; i++) {
  193.                                     let cell2 = { c: C, r: i };
  194.                                     let cell_ref2 =
  195.                                         XLSX.utils.encode_cell(cell2);
  196.                                     if (!wb.Sheets['Sheet JS'][cell_ref2]) {
  197.                                         wb.Sheets['Sheet JS'][cell_ref2] = {
  198.                                             t: 's',
  199.                                             v: ''
  200.                                         };
  201.                                     }
  202.                                 }
  203.                             }
  204.                         });
  205.                     }
  206.                     // 6.  每个单元格的样式 固定 宽度
  207.                     wb.Sheets['Sheet JS']['!cols'].push({
  208.                         wpx: 150
  209.                     });
  210.                     // 7.  每个单元格的样式
  211.                     if (wb.Sheets['Sheet JS'][cell_ref]) {
  212.                         // 每个单元格的样式
  213.                         wb.Sheets['Sheet JS'][cell_ref].s = {
  214.                             font: {
  215.                                 // 字体设置
  216.                                 sz: 12,
  217.                                 bold: false,
  218.                                 color: {
  219.                                     rgb: '000000' // 十六进制，不带#
  220.                                 }
  221.                             },
  222.                             alignment: {
  223.                                 // 文字居中
  224.                                 horizontal: 'center',
  225.                                 vertical: 'center',
  226.                                 wrapText: true // 换行
  227.                             },
  228.                             border: {
  229.                                 // 设置边框
  230.                                 top: {
  231.                                     style: 'thin'
  232.                                 },
  233.                                 bottom: {
  234.                                     style: 'thin'
  235.                                 },
  236.                                 left: {
  237.                                     style: 'thin'
  238.                                 },
  239.                                 right: {
  240.                                     style: 'thin'
  241.                                 }
  242.                             }
  243.                         };
  244.                     }
  245.                 }
  246.             }
  247.             // 8. 文件存在本地
  248.             var wopts = {
  249.                 bookType: 'xlsx', // 要生成的文件类型
  250.                 bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
  251.                 type: 'binary'
  252.             };
  253.             var wbout = XLSXStyle.write(wb, wopts); // 一定要用XLSXStyle不要用XLSX，XLSX是没有格式的！
  254.             // 9. 文件存在本地
  255.             FileSaver.saveAs(
  256.                 new Blob([this.s2ab(wbout)], {
  257.                     type: 'application/octet-stream'
  258.                 }),
  259.                 `${fileName}_${new Date().getTime()}.xlsx`
  260.             );
  261.             setTimeout(() => {
  262.                 downloadLoadingInstance.close();
  263.             }, 1000);
  264.         },
  265.         // 对数据的处理
  266.         s2ab(s) {
  267.             var buf = new ArrayBuffer(s.length);
  268.             var view = new Uint8Array(buf);
  269.             for (var i = 0; i != s.length; ++i) {
  270.                 view[i] = s.charCodeAt(i) & 0xff;
  271.             }
  272.             return buf;
  273.         },
  274.         // 合计
  275.         getSummaries(param) {
  276.             const { columns, data } = param;
  277.             const sums = [];
  278.             columns.forEach((column, index) => {
  279.                 if (index === 0) {
  280.                     sums[index] = '合计';
  281.                     return;
  282.                 }
  283.                 const values = data.map(item => item[column.property]);
  284.                 if (
  285.                     !values.every(
  286.                         value => isNaN(value) || this.$lodash.isNull(value)
  287.                     )
  288.                 ) {
  289.                     sums[index] = values.reduce((prev, curr) => {
  290.                         const value = Number(curr);
  291.                         if (!isNaN(value)) {
  292.                             return Number(prev) + Number(curr);
  293.                         } else {
  294.                             return prev;
  295.                         }
  296.                     }, 0);
  297.                 } else {
  298.                     sums[index] = '--';
  299.                 }
  300.             });
  301.             return sums;
  302.         },
  303.         /** 导出按钮操作 */
  304.         handleExport(fileName) {
  305.             if (this.tableList.length == 0) {
  306.                 this.$message({
  307.                     message: '列表暂无数据，不能执行导出',
  308.                     type: 'error'
  309.                 });
  310.                 return false;
  311.             }
  312.             downloadLoadingInstance = Loading.service({
  313.                 text: '正在下载数据，请稍候',
  314.                 spinner: 'el-icon-loading',
  315.                 background: 'rgba(0, 0, 0, 0.7)'
  316.             });
  317.             this.$nextTick(async () => {
  318.                 await this.excelFn(fileName);
  319.             });
  320.         }
  321.     }
  322. };

点击导出 得到的效果 

（2）获取接口中的excel

  1. <template>
  2.     <div>
  3.         <h1>excel</h1>
  4.         <div id="result" contenteditable></div>
  5.     </div>
  6. </template>
  7.  
  8. <script>
  9. import XLSX from "xlsx";
  10. export default {
  11.     data() {
  12.         return {};
  13.     },
  14.     created() {
  15.         this.loadRemoteFile(
  16.             "http://localhost/dev-api/common/download?fileName=/profile/upload/2021/03/30/47d820f0-7663-4354-b168-f826c2619fd9.xlsx&delete=false"
  17.         );
  18.     },
  19.     methods: {
  20.         // 请求网络接口
  21.         loadRemoteFile(url) {
  22.             let _this = this;
  23.             this.readWorkbookFromRemoteFile(url, function (workbook) {
  24.                 _this.readWorkbook(workbook);
  25.             });
  26.         },
  27.         // 从网络上读取某个excel文件，url必须同域，否则报错
  28.         readWorkbookFromRemoteFile(url, callback) {
  29.             var xhr = new XMLHttpRequest();
  30.             xhr.open("get", url, true);
  31.             xhr.responseType = "arraybuffer";
  32.             xhr.onload = function (e) {
  33.                 if (xhr.status == 200) {
  34.                     var data = new Uint8Array(xhr.response);
  35.                     var workbook = XLSX.read(data, { type: "array" });
  36.                     console.log(workbook,'table 数据')
  37.                     if (callback) callback(workbook);
  38.                 }
  39.             };
  40.             xhr.send();
  41.         },
  42.         // 读取文件
  43.         readWorkbook(workbook) {
  44.             var sheetNames = workbook.SheetNames; // 工作表名称集合
  45.             var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
  46.             var csv = XLSX.utils.sheet_to_csv(worksheet);
  47.             document.getElementById("result").innerHTML = this.csv2table(csv);
  48.         },
  49.         // 将csv转换成表格
  50.         csv2table(csv) {
  51.             var html = "<table>";
  52.             var rows = csv.split("\n");
  53.             rows.pop(); // 最后一行没用的
  54.             rows.forEach(function (row, idx) {
  55.                 var columns = row.split(",");
  56.                 columns.unshift(idx + 1); // 添加行索引
  57.                 if (idx == 0) {
  58.                     // 添加列索引
  59.                     html += "<tr>";
  60.                     for (var i = 0; i < columns.length; i++) {
  61.                         html +=
  62.                             "<th>" +
  63.                             (i == 0 ? "" : String.fromCharCode(65 + i - 1)) +
  64.                             "</th>";
  65.                     }
  66.                     html += "</tr>";
  67.                 }
  68.                 html += "<tr>";
  69.                 columns.forEach(function (column) {
  70.                     html += "<td>" + column + "</td>";
  71.                 });
  72.                 html += "</tr>";
  73.             });
  74.             html += "</table>";
  75.             return html;
  76.         },
  77.     },
  78. };
  79. </script>
  80.  
  81. <style>
  82. table {
  83.     border-collapse: collapse;
  84. }
  85. th,
  86. td {
  87.     border: solid 1px #6d6d6d;
  88.     padding: 5px 10px;
  89. }
  90. </style>

遇到问题

 1. 报错 TypeError: Cannot read properties of undefined (reading ‘utils‘)

解决：把import XLSX from 'xlsx'变成import * as XLSX from 'xlsx'

2. npm i xlsx-style安装完在使用的时候会报错

解决：在vue.config.js

  1.   chainWebpack(config) {
  2.         config.externals({ './cptable': 'var cptable' });
  3. }

参考材料

如何使用JavaScript实现纯前端读取和导出excel文件

sheetjs前段操作excel,点击合并拆分表格增删行列功能实现

四 打印

监听打印预览对话框

  1.   //定义打印前事件
  2.         var beforePrint = function () {
  3.             console.log("打印前");
  4.         };
  5.         //定义打印后事件
  6.         var afterPrint = () => {
  7.             console.log("打印后");
  8.             
  9.         };
  10.         //监听window状态
  11.         if (window.matchMedia) {
  12.             var mediaQueryList = window.matchMedia("print");
  13.             //为印添加事件
  14.             mediaQueryList.addListener(function (mql) {
  15.                 if (mql.matches) {
  16.                     beforePrint();
  17.                 } else {
  18.                     afterPrint();
  19.                 }
  20.             });
  21.         }

批量打印

(1) 打开新窗口的形式window.open("black.html"）

  1. <!-- 批量打印  -->
  2. <div ref="receiptJS" id="pdfdJS" style="display: none">
  3.    <img ref="pdfdImg" id="pdfdImg" style="width: 100%" />
  4. </div>
  5. <el-button
  6. 	type="primary"
  7. 	icon="el-icon-printer"
  8. 	size="mini"
  9. 	id="pldyId"
  10. 	@click="gprint"
  11. 	>批量打印</el-button
  12. >
  13. //批量打印功能
  14. async gprint() {
  15. 	let _this = this;
  16. 	await this.createDIV("pdfdJS", "pdfdImg");
  17. 	const loadingBatchPrint = this.$loading({
  18. 		lock: true,
  19. 		text: "正在打印中...",
  20. 		spinner: "el-icon-loading",
  21. 		background: "rgba(0, 0, 0, 0.7)",
  22. 	});
  23. 	await _this.printEventList();
  24. 	await _this.handleQuery();
  25. 	loadingBatchPrint.close();
  26. },
  27. // 批量打印
  28. async printEventList() {
  29. 	let _this = this;
  30. 	try {
  31. 		//1. 获取nextID
  32. 		const base64 = await nextPrint();
  33. 		if (base64.code == 402) {
  34. 			this.$message({
  35. 				showClose: true,
  36. 				message: "批量打印完成",
  37. 				type: "success",
  38. 			});
  39. 			return false
  40. 		} else if (base64.code !== 200) {
  41. 			throw new Error(base64.msg);
  42. 		}
  43. 		//2 获取图片 base64 地址
  44. 		const printRes = await fp_imgPrint(base64.img);
  45. 		if (printRes.code !== 200) {
  46. 			throw new Error(printRes.msg);
  47. 		}
  48. 		// 3. 调浏览器打印
  49. 		await this.plPrint(printRes);
  50. 	} catch (err) {
  51. 		let { message } = err;
  52. 		if (!message.includes("timeout")) {
  53. 			this.$message({
  54. 				showClose: true,
  55. 				message: err,
  56. 				type: "error",
  57. 			});
  58. 		}
  59. 		return;
  60. 	}
  61. },
  62. //批量打印，没有安装httpserver的情况
  63. plPrint(printRes) {
  64. 	let box = document.getElementById("pdfdImg");
  65. 	box.src = "data:image/jpg;base64," + printRes.msg;
  66. 	this.$nextTick(() => {
  67. 		box.onload = () => {
  68. 			this.doPrint();
  69. 		};
  70. 	});
  71. },
  72. // 浏览器打印
  73. doPrint() {
  74. 	//根据div标签ID拿到div中的局部内容
  75. 	var jubuData = document.getElementById("pdfdJS").innerHTML;
  76. 	// 将打印的区域赋值给新窗口body，进行打印
  77. 	const newWindow = window.open("black.html");
  78. 	newWindow.document.write(jubuData);
  79. 	newWindow.window.print();
  80. 	newWindow.window.close(); // 打印完成后关闭后新窗口
  81. 	this.gprint();
  82. 	return false;
  83. },
  84. /** 消除dom */
  85. /**
  86.  * @param father 父
  87.  * @param ownId  删除的div  id
  88.  */
  89. createDIV(father, ownId) {
  90. 	let box = document.getElementById(father);
  91. 	document.getElementById("pdfdImg").remove();
  92. 	let ple = document.createElement("img");
  93. 	ple.setAttribute("id", "pdfdImg");
  94. 	ple.setAttribute("ref", "pdfdImg");
  95. 	ple.style.width = "100%";
  96. 	box.appendChild(ple);
  97. },

（2）采用print-js 

onPrintDialogClose 监听浏览器对话框关闭事件

  1. <!-- 批量打印 图片  -->
  2.  <div ref="receiptJS" class="print-ul" id="pdfdJS">
  3.  <el-button type="primary" @click="submitForm">打印</el-button>
  4.  
  5.  let loadingBatchPrint = "";
  6.  
  7.   //批量打印操作
  8. async batchPrintHandle() {
  9. 	pageLoading = this.setLoading("打印数据加载中...");
  10. 	let result = await this.getDqrList();
  11. 	if (result.data.length > 0) {
  12. 		// 获取批量打印图片数据
  13. 		let data = filterArr.map((item) => {
  14. 			return "data:image/jpg;base64," + item;
  15. 		});
  16. 		//打印
  17. 		await this.printHandle(data);
  18. 	}
  19. },
  20.  
  21. // 设置通用loading提示
  22. setLoading(text) {
  23. 	return this.$loading({
  24. 		lock: true,
  25. 		text: text,
  26. 		spinner: "el-icon-loading",
  27. 		background: "rgba(0, 0, 0, 0.7)",
  28. 	});
  29. },
  30.  // 打印所有
  31. async printHandle(imgArr) {
  32. 	document.getElementById("pdfdJS").innerHTML = "";
  33. 	await this.batchCreateDIV("pdfdJS", imgArr);
  34. 	await this.prinkFn();
  35. },
  36. /**
  37.  * @param father 父
  38.  * @param ownId  删除的div  id
  39.  */
  40. batchCreateDIV(father, imgArr) {
  41. 	let box = document.getElementById(father);
  42. 	if (imgArr.length > 0) {
  43. 		imgArr.map((item, index) => {
  44. 			let img = item.hasOwnProperty("imgBase64")
  45. 				? item.imgBase64
  46. 				: item;
  47. 			let ple = document.createElement("img");
  48. 			ple.setAttribute("id", "pdfdImg" + index);
  49. 			ple.setAttribute("src", img);
  50. 			ple.style.width = "100%";
  51. 			box.appendChild(ple);
  52. 		});
  53. 	}
  54. },
  55. // 打印方法
  56. async prinkFn(flag) {
  57. 	 // 解决Vue+Print.js配置 忠onPrintDialogClose监听不到的问题
  58. 	let focuser = setInterval(
  59. 		() => window.dispatchEvent(new Event("focus")),
  60. 		500
  61. 	);
  62. 	const style =
  63. 		"@page { size: auto; margin: 0mm; } " +
  64. 		"@media print { .img {width: 100%;    }";
  65. 	print({
  66. 		printable: "pdfdJS",
  67. 		type: "html",
  68. 		style: style, // 亦可使用引入的外部css;
  69. 		scanStyles: false,
  70. 		onPrintDialogClose: async () => {
  71. 			clearInterval(focuser);
  72. 			console.log('打印预览对话框关闭，这个不能区分是取消还是打印')
  73. 			//调查询接口
  74. 		},
  75. 	});
  76. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/172628
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号