electron-hiprint icon indicating copy to clipboard operation
electron-hiprint copied to clipboard

render-pdf 生成内容与 getPdf api 不一致

Open Xavier9896 opened this issue 11 months ago • 2 comments

左侧为 vue-plugin-hiprint getPdf 效果,右侧为 electron-hiprint 提供 render-pdf 效果

image

后台导出.pdf 前台导出1212.pdf

附json 点击查看
{
	"panels": [{
		"index": 0,
		"name": 1,
		"height": 12,
		"width": 12,
		"paperHeader": 0,
		"paperFooter": 31.515151515151512,
		"printElements": [{
			"options": {
				"left": 1.5,
				"top": 0,
				"height": 25.5,
				"width": 25.5,
				"title": "二维码",
				"qrcodeType": "qrcode",
				"testData": "qrcode",
				"field": "qrcode",
				"qrCodeLevel": 0,
				"coordinateSync": false,
				"widthHeightSync": false,
				"hideTitle": true,
				"zIndex": 1,
				"right": 27.375,
				"bottom": 23.375003814697266,
				"vCenter": 14.625,
				"hCenter": 10.625003814697266
			},
			"printElementType": {
				"title": "二维码",
				"type": "qrcode"
			}
		}],
		"paperNumberLeft": 4,
		"paperNumberTop": 12,
		"paperNumberContinue": true,
		"watermarkOptions": {
			"content": "",
			"rotate": 25,
			"timestamp": true,
			"format": "YYYY-MM-DD HH:mm",
			"fillStyle": "rgba(184, 184, 184, 0.3)",
			"fontSize": "14px",
			"width": 200,
			"height": 200
		},
		"panelLayoutOptions": {
			"layoutType": "column",
			"layoutRowGap": 0,
			"layoutColumnGap": 0
		}
	}]
}

Xavier9896 avatar Jan 10 '25 03:01 Xavier9896

自定义纸张大小为12*12, electron-hiprint 提供 render-pdf生成的矢量PDF与前台导出查看pdf(PdfObjectNewWindow)效果不一致,且多打了一张空白页。 62b3ea268c0b9e00c768a60d762fa93

使用版本及方法如下图

635e47b46def0bf34ba01b957608ed6

使用electron-hiprint 提供 render-pdf导出矢量Pdf 的方法

   exportSvgPdf() {
      const printOptions = {
        pageSize: {
          width: hiprintTemplate.editingPanel.width * 1000,
          height: hiprintTemplate.editingPanel.height * 1000,
        },
        printer: 'Microsoft Print to PDF',
        template: hiprintTemplate.getJson(),
        data: printData,
      }
      hiprint.hiwebSocket.socket.emit('render-pdf', {
        ...printOptions,
      })
      hiprint.hiwebSocket.socket.on('render-pdf-success', (data) => {
        console.log('render-pdf-success: ', data)
        this.previewPdfByBlob(data.buffer)
      })
      hiprint.hiwebSocket.socket.on('render-pdf-error', (data) => {
        console.log('render-pdf-error: ', data)
      })
    },

    // 预览PDF 流
    previewPdfByBlob(data) {
      const blob = new Blob([data], { type: 'application/pdf' })
      const blobURL = window.URL.createObjectURL(blob)
      if (blobURL) {
        window.open(URL.createObjectURL(blob))
      }
    },

模板JSON
   {
    "panels": [
        {
            "index": 0,
            "name": 1,
            "height": 12,
            "width": 12,
            "paperHeader": 1.5,
            "paperFooter": 31.515151515151516,
            "printElements": [
                {
                    "options": {
                        "left": 1.5,
                        "top": 0,
                        "height": 9.75,
                        "width": 19.5,
                        "title": "文本",
                        "right": 20.25,
                        "bottom": 6.75,
                        "vCenter": 10.5,
                        "hCenter": 1.875
                    },
                    "printElementType": {
                        "title": "文本",
                        "type": "text"
                    }
                }
            ],
            "paperNumberLeft": 12,
            "paperNumberTop": 13.5,
            "paperNumberDisabled": true,
            "paperNumberContinue": true,
            "watermarkOptions": {
                "content": "vue-plugin-hiprint",
                "rotate": 25,
                "timestamp": true,
                "format": "YYYY-MM-DD HH:mm"
            },
            "panelLayoutOptions": {}
        }
    ]
}

后台使用render-pdf生成的矢量PDF.pdf 前台导出的.pdf

Jamboy avatar Jan 10 '25 03:01 Jamboy

今天研究了很久,尝试过很多方式暂时无法解决,已知该问题暂时只出现在小模板上

Xavier9896 avatar Apr 04 '25 04:04 Xavier9896