前端js html转换成pdf可下载打印；前端js可批量生成条形码；前端js可批量生成二维码，生成letter标签

注意：本文调试的是letter纸尺寸

前端js html转换成pdf可下载打印  html2canvas  + jspdf

前端js生成条形码

Options · lindell/JsBarcode Wiki · GitHub

前端js生成二维码

https://github.com/davidshimjs/qrcodejs

前端的node包安装好以后

第一步:根据值生成条形码或者二维码

第二步：循环遍历批量生成dom元素

第三步：将生成的Dom元素转换成PDF可打印可下载

以下就是代码步骤：

注意：此处是根据接口数据循环生成的dom元素，批量生成同样的标签

<!--  打印标签html容器 -->
<div class="pdfDom image-code"
     v-for='(item, x) in pdfDomPage' :key='x'
     style='display: flex;flex-wrap:wrap;width: 612px;color: #000;'>
          <div  v-for='(code, j) in item' :key='j' class='label-wrapper'
            style='width: 30%; height: 59.55px; margin-bottom: 15px; text-align: center;
              margin-right: 18px; padding-top: 8px; box-sizing: border-box;'>
            <div class='js-bar-code' style='width: 90%;margin: auto;'>
              <img :id='`jsBarCode${x}${j}`' style='height: 25px;width:100%'></div>
            <div class='wayfair-qrcode'
              style='display: flex; width: 90%; margin: auto;
                    justify-content: space-between; padding-top: 3px;'>
              <p class='js-bar-fnSKU' style='font-size: 12px;transform: scale(0.8);'>
                    {{code.fnSKU}}</p>
           <div :id="`qrcode${x}${j}`" :class="`qrcode${x}${j}`"></div>
       </div>
    </div>
</div>

// 引入需要的插件

    import JsBarcode from 'jsbarcode'
    import QRCode from 'qrcodejs2'

    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'


// data中定义需要的字段
 
      pdfDomPage: [], // 每30个一组生成1张pdf
      fnSKU: 'HCF-1743-00-BNWF-1', // 标签详情 生成条形码和二维码的数据
      labelLoading: false, // 标签生成中 避免多次点击
      quantity: 35, // 35生成标签的个数，可根据项目设置成动态的


// 方法 生成条形码和二维码
// 创建标签
    createLabel () {
        // 设置打印数据 分页 
        for (var i = 0; i < quantity; i++) {
             this.pdfDomPage.push({fnSKU: this.fnSKU})
        }
        // 数量大于30，每30个标签一个分页
              var newCardList = []
        for (var x = 0; x < this.pdfDomPage.length; x += 30) {
                newCardList.push(this.pdfDomPage.slice(x, x + 30))
              }
    this.pdfDomPage = newCardList
    this.$nextTick(() => {
         // 生成条形码 因为是根据同一组数据动态循环的个数，所以每个DOM元素的id根据index进行动态设置
                this.pdfDomPage.forEach((item, x) => {
                  item.forEach((sku, j) => {
                    JsBarcode(`#jsBarCode${x}${j}`, sku.fnSKU, {
                      format: 'CODE128', // 条码格式
                      displayValue: false, // 是否在条码下显示值
                      // fontSize: 10, // 字体大小
                      lineColor: '#000', // 条码与字体颜色
                      width: 1,
                      height: 25,
                      font: 'Arial Regular',
                      margin: 0
                    })
                  })
                })
         // 生成二维码
             this.pdfDomPage.forEach((item, x) => {
                    item.forEach((sku, j) => {
                      document.getElementById(`qrcode${x}${j}`).innerHTML = '' // 置空
                      var qrcode = new QRCode(document.getElementById(`qrcode${x}${j}`), {
                        text: sku.fnSKU, // 二维码内容
                        width: 30,
                        height: 30,
                        render: 'table',
                        colorDark: '#000', // 二维码颜色
                        colorLight: '#fff', // 二维码背景色
                        correctLevel: QRCode.CorrectLevel.H // 容错率，L/M/H
                      })
                      console.info(qrcode, 'qrcode')
                      // var childs = document.getElementById(`qrcode${x}${j}`).childNodes
                      // document.getElementById(`qrcode${x}${j}`).removeChild(childs[0])
                    })
                  })
        // html转换成PDF
         this.htmltopdf('pdfDom')
    })

},
// html转换成PDF
    /**
     * html转成pdf
     */
    htmltopdf (name, title) {
      const _this = this
      this.creatLoading = true
      const element = document.querySelectorAll(`.${name}`)
      let count = 0
      const PDF = new JsPDF('', 'pt', 'letter')
      const pageArr = []
      const opts = {
        scale: 12, // 缩放比例，提高生成图片清晰度
        useCORS: true, // 允许加载跨域的图片
        allowTaint: false, // 允许图片跨域，和 useCORS 二者不可共同使用
        tainttest: true, // 检测每张图片已经加载完成
        logging: true // 日志开关，发布的时候记得改成 false
      }
      for (const index in Array.from(element)) {
        html2Canvas(element[index], opts).then(function (canvas) {
          // letter纸的尺寸[612.36 * 790.97]，html页面生成的canvas在pdf中图片的宽高
          const contentWidth = canvas.width
          const contentHeight = canvas.height
          const imgWidth = 612.36
          const imgHeight = (612.36 / contentWidth) * contentHeight
          const pageData = canvas.toDataURL('image/jpeg', 1.0)
          // 一页pdf显示html页面生成的canvas高度;
          const pageHeight = (contentWidth / 612.36) * 790.97
          // 未生成pdf的html页面高度
          const leftHeight = contentHeight
          pageArr[index] = { pageData: pageData, pageHeight: pageHeight, leftHeight: leftHeight, imgWidth: imgWidth, imgHeight: imgHeight }
          if (++count === element.length) {
            // 转换完毕，可进行下一步处理 pageDataArr
            let counts = 0
            for (const data of pageArr) {
              // 页面偏移
              let position = 30.97
              // 转换完毕，save保存名称后浏览器会自动下载
              // 当内容未超过pdf一页显示的范围，无需分页
              if (data.leftHeight < data.pageHeight) {
                // addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
                PDF.addImage(data.pageData, 'JPEG', 9, 30.97, data.imgWidth, data.imgHeight)
              } else {
                // 超过一页时，分页打印（每页高度841.89）
                while (data.leftHeight > 0) {
                  PDF.addImage(data.pageData, 'JPEG', 9, position, data.imgWidth, data.imgHeight)
                  data.leftHeight -= data.pageHeight
                  position -= 790.97
                  if (data.leftHeight > 0) {
                    PDF.addPage()
                  }
                }
              }
              if (++counts === pageArr.length) {
                // PDF.save(title + '.pdf')
                window.open(PDF.output('bloburl')) // 在新页面打开当前pdf
                // console.info('The current PDF has been opened on a new page！')
                _this.cancelLabel()
                return PDF.output('datauristring')
              } else {
                // 未转换到最后一页时，pdf增加一页
                PDF.addPage()
                _this.cancelLabel()
              }
            }
          }
        })
      }
    },
    // 取消创建标签 或者生成标签后 要重置数据
    cancelLabel () {
      this.pdfDomPage = []
    },

最终结果：如图

单张：

 

 多张：