我将生成的 pdf 作为 base64 pdf 字符串从我的服务器发送到客户端。我正在尝试使用 printJS 在客户端打印它

Question

我正在我的服务器上使用 fluentreports 生成报告，并在回调时将 base64 pdf 字符串发送到客户端。在客户端上，一旦 he/she 收到 base64 字符串，我就需要将此 pdf 字符串打印为 pdf，我正在尝试使用 printJS 来完成。我也尝试过 pdfMake，但没有人愿意工作。如果我 console.log base64 字符串并单击它，pdf 会在下一个选项卡中打开，但一旦我尝试使用 printJS 或 pdfMake 打印它，它就会打开一个新选项卡并自动关闭它而不执行任何操作。我还有其他方法可以做到这一点吗？通过在线阅读其他人的问题，我已经尝试了很多事情，但一无所获。是否有任何库可以使用 base64 pdf 字符串创建 PDF 文档，以便我可以使用 printJS 打印文档？

向服务器发送信息并接收回 pdf 字符串的客户端函数：

submit: function () {
      this.$Socket.emit('addrepair', {
        CustomerID: this.$route.params.Customer.CustomerID,
        Problem: this.problem,
        BrandID: this.brand,
        TypeID: this.type,
        Model: this.model,
        ColorID: this.color,
        Warranty: this.convertbool(this.warranty),
        Purchased: this.convertbool(this.purchase),
        RushService: this.convertbool(this.rush),
        DateReceived: this.datereceived,
        UserID: this.UserID
      }, (data) => {
        if(data.authenticated==true)
        {
          //window.open(data.pdf)
          //pdfMake.createPdf(this.convertDataURIToBinary(data.pdf)).print()
          console.log(data.pdf)
          printJS({printable: data.pdf, type: 'pdf'})
          this.jobdialog=true
        }
      })

服务于 pdf base64 字符串的服务器上的函数：

socket.on('addrepair', (data, callbackfn) => {
    let query="INSERT INTO repair(CustomerID, Problem, BrandID, Model, ColorID, Warranty, Purchased, RushService, DateReceived, TypeID, UserID) VALUES (" + data.CustomerID + ", \'" + data.Problem + "\', " + data.BrandID + ", \'" + data.Model + "\', " + data.ColorID + ", " + data.Warranty + ", " + data.Purchased + ", " + data.RushService + ", \'" + data.DateReceived + "\', " + data.TypeID + ", " + data.UserID + ");"
    con.query(query, function(err) {
      if(err) {
        throw err
      }
      else
      {
        query="SELECT RepairID, FirstName, LastName, Address, PhoneNumber, RushService, Purchased, DateReceived, Problem, Model, (SELECT Type from types WHERE repair.TypeID=types.TypeID) as Type, (SELECT Color from colors WHERE repair.ColorID=colors.ColorID) as Color, (SELECT Brand from brands WHERE repair.BrandID=brands.BrandID) as Brand, Warranty from repair INNER JOIN customer ON repair.CustomerID=customer.CustomerID WHERE repair.RepairID=(SELECT LAST_INSERT_ID())"
        con.query(query, function(err, rows) {
          if(err) {
            throw err
          }
          else
          {
            var options = {
              data: rows
            }
            //var myreport = new Report("buffer", options)
            var myreport=new Report.Report("buffer", options)
              .data(rows)
              .pageHeader(repairheaderFunction)
              .detail(repairdetailFunction)
              .pageFooter(repairfooterFunction)
            myreport.render(function (err, data) {
              callbackfn({authenticated: true, pdf: 'data:application/pdf;base64,' + data.toString('base64')})
            })
            //callbackfn({authenticated: true, data: rows})
          }
        })
      }
    })
  })

var repairheaderFunction = function(Report, data) {

};

var repairdetailFunction = function(Report, data) {
  Report.print("#" + data.RepairID, {fontSize: 22, bold: true, underline:true, align: "center"});
  Report.newLine(2);
  Report.print('First Name: ' + data.FirstName + "\n")
  Report.print('Last Name: ' + data.LastName + "\n")
  Report.print('Address: ' + data.Address + "\n")
  Report.print('Phone Number: ' + data.PhoneNumber + "\n")
  Report.print('Brand: ' + data.Brand + "\n")
  Report.print('Model: ' + data.Model + "\n")
  Report.print('Color: ' + data.Color + "\n")
  Report.print('Problem: ' + data.Problem + "\n")
  Report.print('Date Received: ' + data.DateReceived.slice(15) + "\n")
  /*.text('Last Name: [LastName]\n')
  .text('Address: [Address]\n')
  .text('Phone Number: [PhoneNumber]\n')
  .text('Brand: [Brand]\n')
  .text('Model: [Model]\n')
  .text('Color: [Color]\n')
  .text('Problem: [Problem]\n')
  .text('Date Received: [DateReceived]', 1.75, 0, 1, 0.25, {
      pattern: 'M/D/YY'
  })*/
};

var repairfooterFunction = function(Report) {
  Report.line(Report.currentX(), Report.maxY()-18, Report.maxX(), Report.maxY()-18);
  Report.pageNumber({text: "Page {0} of {1}", footer: true, align: "right"});
  Report.print("Printed: "+(new Date().toLocaleDateString()), {y: Report.maxY()-14, align: "left"});
};

Answer 1

Print.js 现在支持 base64 PDF 打印。

试试这个：

printJS({
  printable: your_base64_data_string,
  type: 'pdf'
  base64: true
})

文档已更新为打印 base64 PDF 文档的示例。 http://printjs.crabbly.com#pdf

Answer 2

经过大量尝试代码和思考可能的解决方案后，才得以实现。生成 iframe，使用报告的自动打印属性拉出打印对话框，然后一旦焦点再次使用 'mousemove' 事件删除 iframe 代码如下：

printIframe: function(url) {
      var proxyIframe = document.createElement('iframe');
      var body = document.getElementsByTagName('body')[0];
      body.appendChild(proxyIframe);
      proxyIframe.style.width = '100%';
      proxyIframe.style.height = '100%';
      proxyIframe.id='iframe'
      proxyIframe.style.display = 'none';

      var contentWindow = proxyIframe.contentWindow;
      contentWindow.document.open();

      // Set dimensions according to your needs.
      // You may need to calculate the dynamically after the content has loaded
      contentWindow.document.write('<iframe src="' + url + '" width="1000" height="1800" frameborder="0" marginheight="0" marginwidth="0">');
      contentWindow.document.close();
      var x=0
      var func=function (event) {
        if(x===0)
        {
          body.removeChild(proxyIframe)
          ++x
        }
        else
        {
          document.removeEventListener('mousemove', func)
        }
      }
      contentWindow.document.body.onload=() => {
        contentWindow.document.body.focus()
        setTimeout(()=>{
          document.addEventListener('mousemove', func)
        }, 5000)
      }
    },

我将生成的 pdf 作为 base64 pdf 字符串从我的服务器发送到客户端。我正在尝试使用 printJS 在客户端打印它

I'm sending a generated pdf from my server to the client as a base64 pdf string. I'm trying to print it on the client side using printJS

websocket

node.js

vue.js

printjs