Electron / Nativefier Web App - 新窗口打印问题 [HTML, JS]答案

【问题标题】：Electron / Nativefier Web App - new window print problem [HTML, JS]Electron / Nativefier Web App - 新窗口打印问题 [HTML, JS]
【发布时间】：2020-07-11 09:00:56
【问题描述】：

我用Nativefier 构建了一个桌面应用程序，女巫基于Eelectron JS。我遇到了打印问题，只有在尝试打开带有打印预览的新窗口时才会出现问题。

我有很多表格，每个表格都附有这段代码，以使它们可打印（略有不同）：

    function printData3()
{
   var divToPrint=document.getElementById("myTable");
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding:0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write(htmlToPrint);
    newWin.print(htmlToPrint);
    newWin.close();
}

$(document.getElementById("print-pred")).on('click',function(){
printData3();
})

这在正常情况下适用于所有浏览器，但在应用程序中失败并出现错误：

Uncaught TypeError: Cannot read property 'write' of undefined
    at printData3 (rad.php:1373)
    at HTMLButtonElement.<anonymous> (rad.php:1379)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.v.handle (jquery.min.js:2)

该错误行指的是：newWin.document.write(htmlToPrint); 来自上面显示的代码。

然而，这段代码可以正常工作并立即启动一个打印对话框：

function myFunction() {
  window.print();

Witch 让我相信（这是一个猜测，如果我错了，请纠正）问题在于打开一个带有打印预览的新窗口，因为 Web 应用程序本身是无 Chrome 的，并且设计为只能在一个窗口中工作。

现在如前所述，我在不到 100 个实例中实现了此代码，并带有一些变体，因此在所有位置一起更改它对我来说是个大问题。

所以我的问题是，上面显示的第一个代码是否可以以某种方式最小化地更改为首先跳转到打印对话框（跳过新窗口预览部分）？所以我可以做简单的搜索/替换所有文件。

编辑： 作为答案发布的解决方案。

【问题讨论】：

标签： javascript jquery web-applications electron

【解决方案1】：

我对“Nativefier”不是很熟悉，但我猜newWin 变量没有像“document”这样的属性，错误就是这样说。但是使用 Electron，您可以使用 webContents 方法 - executeJavascript：

// Warning: pure Electron, no add-ons or something like Nativefier
const { app, BrowserWindow } = require('electron')
const path = require('path')

app.once('ready', () => {
  var mainWindow = new BrowserWindow()
  mainWindow.loadURL(path.join(__dirname, 'index.html'))
  mainWindow.webContents.executeJavaScript(`
    document.getElementById("list").innerHTML += '<h1>Hey Wassup</h1>'
  `)
    }
  })
})

【讨论】：

好吧，我不是 JS 方面的专家，所以不幸的是，这些信息对我来说并不值钱。
再次检查答案，也许只有电子解决方案可以帮助你，@ikiK
谢谢，但在没有 Electron 的情况下也能正常工作，请参阅我的回答。无论如何，谢谢你。

【解决方案2】：

找到了解决办法。

htmlToPrint += divToPrint.outerHTML;
newWin = window.document.write(htmlToPrint);
window.print();
location.reload();

我没有打开新窗口。在当前我打开一个文档并在其中写入表格，打开一个窗口打印对话框并保存为 PDF 或打印它。在我关闭它后，该位置会重新加载并自行关闭新文档并返回表格页面。

在浏览器和应用程序中工作。

【讨论】：