react前端勾选/批量打印功能,和将后端返回的条形码pdf格式转化并新窗口打开

  // 打印相关的逻辑,点击按钮 调用handlePrint()
  @Bind()
  handlePrint() {
    const { dispatch } = this.props;
    const { selectedRowKeys } = this.state;
    // selectedRowKeys是需要打印的数据的标识,将需要打印的数据标示传递给后端,根据后端要求传递,
    dispatch({
      type: 'qualityResult/fetchListPrint',
      payload: selectedRowKeys,
    }).then((res) => {
    //  后端返回已经描绘好的发票或者资源数据,一般是pdf格式或其他格式,需要前端转码展示
      if (res) {
        const file = new Blob([res], { type: 'application/pdf' });
        const fileURL = URL.createObjectURL(file);
        const printWindow = window.open(fileURL);
      //  printWindow.print();是浏览器自带打印方法
        printWindow.print();
      }
    });
  }
/**
 * 质检结果查询-批量打印
 * @param {object} params
 */
//  注意接口附加上 responseType: 'blob',
 
export async function fetchListPrint(params) {
  return request(`${SRM_SQAM}/v1/${organizationId}/incoming-inspections/batch/print`, {
    method: 'POST',
    responseType: 'blob',
    body: params,
  });
}

或者将后端返回的条形码文件转码在新窗口打开

seeCode() {
    const { dispatch, detailHeader } = this.props;
    const { itemCode } = detailHeader;
    console.log(detailHeader, itemCode);
    dispatch({
      type: 'incomingInspectionMaintain/barCode',
      payload: {
        itemCode,
      },
    }).then((res) => {
      if (res) {
        const file = new Blob([res], { type: 'application/PNG' });
        // const fileURL = URL.createObjectURL(file);
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function () {
          var base64data = reader.result;
          const img = new Image();
          img.src = base64data;
          img.width = 300;
          img.style.position = 'absolute';
          img.style.top = '0';
          img.style.left = '0';
          img.style.right = '0';
          img.style.bottom = '0';
          img.style.margin = ' auto';
          const newWin = window.open('', '_blank');
          newWin.document.write(img.outerHTML);
          newWin.document.title = '条形码';
        };
      }
    });
  }```


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值