vue2中判断iframe框架是否加载完成

在Vue 2中，可以使用原生JavaScript来判断iframe框架是否加载完成。具体实现方法如下：

首先，在模板中定义一个iframe元素，并设置一个ref属性，如下所示：

<iframe ref="myFrame" src="https://example.com"></iframe>

然后，在Vue组件的mounted钩子中，使用JavaScript获取该iframe元素，并添加load事件监听器，如下所示：

mounted() {
  const frame = this.$refs.myFrame
  frame.addEventListener('load', () => {
    console.log('iframe loaded')
  })
}

当iframe框架加载完成时，load事件将被触发，并执行回调函数中的代码。您可以在回调函数中执行任何需要等待iframe加载完成后才能执行的操作。

相关问题

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>

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

作为AI助手，我无法访问您的电脑或网页，但是我可以给您提供一个思路。您可以使用Electron的webContents对象的printToPDF方法来生成PDF文件，然后将其保存到本地文件系统或打印机上。具体步骤如下：

1. 获取iframe的DOM对象，可以使用document.getElementById('iframeId').contentDocument获取。
2. 将iframe的内容通过webContents.printToPDF方法生成PDF文件。
3. 将生成的PDF文件保存到本地文件系统或打印机上。

以下是一个示例代码：

const { ipcRenderer } = require('electron');

// 获取iframe DOM对象
const iframe = document.getElementById('iframeId').contentDocument;

// 通过webContents.printToPDF方法生成PDF文件
ipcRenderer.send('print-to-pdf', iframe);

// 监听生成PDF文件完成事件
ipcRenderer.on('pdf-printed', (event, path) => {
  console.log(`PDF文件已保存至${path}`);
});

在主进程中，您需要监听ipcRenderer发送的'print-to-pdf'事件，并调用webContents.printToPDF方法，然后将生成的PDF文件路径发送给渲染进程。

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

ipcMain.on('print-to-pdf', (event, iframe) => {
  const win = BrowserWindow.fromWebContents(event.sender);
  const pdfPath = path.join(app.getPath('desktop'), 'print.pdf');

  win.webContents.printToPDF({
    pageSize: 'A4',
    marginsType: 1,
    printBackground: true,
    printSelectionOnly: false,
    landscape: false,
  }, (error, data) => {
    if (error) throw error;
    fs.writeFile(pdfPath, data, (err) => {
      if (err) throw err;
      event.sender.send('pdf-printed', pdfPath);
    });
  });
});

请注意，您需要在渲染进程和主进程之间设置IPC通信。同时，您还需要安装和引入electron-pdf-window模块来生成PDF文件。