electron-vue 打印页面中iframe框架中加载的内容

要打印 electron-vue 页面中 iframe 框架中加载的内容，需要使用以下步骤：

1. 获取 iframe 元素

使用 `document.getElementsByTagName()` 方法获取 iframe 元素，并通过 `contentWindow` 属性获取 iframe 内部文档的 window 对象。

const iframe = document.getElementsByTagName('iframe')[0];
const iframeWindow = iframe.contentWindow;

2. 向 iframe 内部发送打印指令

在 iframe 内部，使用 `window.print()` 方法打印页面内容。可以通过在主进程中使用 ipcRenderer 向渲染进程发送消息，然后在渲染进程中监听该消息并执行打印操作。

// 在主进程中
ipcMain.on('print-iframe', (event) => {
  const iframe = mainWindow.webContents.findFrameByName('iframe-name');
  iframe.send('print');
});

// 在渲染进程中
ipcRenderer.on('print', () => {
  window.print();
});

3. 添加打印按钮并绑定事件

在页面中添加一个打印按钮，并在按钮的点击事件中向主进程发送打印指令。

<button @click="printIframe">打印</button>

// 在 Vue 组件中
methods: {
  printIframe() {
    ipcRenderer.send('print-iframe');
  }
}

4. 完整代码示例

主进程代码：

const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      webviewTag: true
    }
  });

  mainWindow.loadURL('https://example.com');

  mainWindow.webContents.on('did-finish-load', () => {
    const iframe = mainWindow.webContents.findFrameByName('iframe-name');
    iframe.executeJavaScript(`
      window.addEventListener('message', (event) => {
        if (event.data === 'print') {
          window.print();
        }
      });
    `);
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  }
});

ipcMain.on('print-iframe', (event) => {
  const iframe = mainWindow.webContents.findFrameByName('iframe-name');
  iframe.send('print');
});

渲染进程代码：

<template>
  <div>
    <button @click="printIframe">打印</button>
    <iframe name="iframe-name" src="https://example.com"></iframe>
  </div>
</template>

<script>
const { ipcRenderer } = require('electron');

export default {
  methods: {
    printIframe() {
      ipcRenderer.send('print-iframe');
    }
  }
}
</script>