在电子和 iframe 中运行 powerbi 嵌入报告

Question

我在 url 类型上遇到了 powerBi 报告的问题：

https://app.powerbi.com/reportEmbed?reportId=XXX&autoAuth=true&ctid=YYY

我在 iframe 中的 Electron 29.2.0 中启动它

我有这个错误：

屏幕是

这个要求看起来不错

如果我使用https://www.npmjs.com/package/powerbi-client-react

也会出现同样的问题

但是如果我使用 webview 而不是 iframe 就可以了（但不推荐使用 webview，而且我面临其他问题）

这里是 electro.js 代码：

// Modules to control application life and create native browser window
const {
  app,
  BrowserWindow,
  globalShortcut,
  screen,
  ipcMain,
} = require("electron");
const { platform, argv } = require("process");

let mainWindow;

// INTEL BASED CPU
// app.commandLine.appendSwitch("ignore-gpu-blacklist");
// app.commandLine.appendSwitch("enable-accelerated-video");
app.commandLine.appendSwitch(
  "disable-features",
  "BlockInsecurePrivateNetworkRequests,PrivateNetworkAccessSendPreflights"
);

// ALLOW PUPPETEER AND OTHERS TO CONNECT
app.commandLine.appendSwitch("remote-debugging-port", "59059");

function createWindow() {
  mainWindow = new BrowserWindow({
    icon: `${__dirname}/build/favicon.ico`,
    title: "Instore Solution - Digital Signage Player",
    width: 640, //size.width,
    height: 480, //size.height,
    transparent: false,
    backgroundColor: "#000000",
    frame: false,
    fullscreen: false,
    resizable: true,
    webPreferences: {
      autoplayPolicy: "no-user-gesture-required",
      nodeIntegration: true,
      webSecurity: false,
      webviewTag: true,
      plugins: true,
      allowRunningInsecureContent: true,
      nodeIntegrationInSubFrames: true,
      contextIsolation: false,
    },
  });

  let appUrlLoaded = false;

  function resize(screen) {
    const windowBounds = mainWindow.getBounds();

    if (
      Math.abs(windowBounds.width - screen.bounds.width) > 2 ||
      Math.abs(windowBounds.height - screen.bounds.height) > 2 ||
      Math.abs(windowBounds.x - screen.bounds.x) > 2 ||
      Math.abs(windowBounds.y - screen.bounds.y) > 2
    ) {
      console.log(
        "size is different",
        windowBounds,
        screen.size,
        screen.bounds
      );

      mainWindow.setResizable(true);

      setTimeout(() => {
        try {
          mainWindow.setPosition(screen.bounds.x, screen.bounds.y);
          mainWindow.setSize(screen.bounds.width, screen.bounds.height);

          setTimeout(() => {
            try {
              mainWindow.setResizable(false);

              if (process.argv.indexOf("--dev") === -1) {
                mainWindow.loadURL(
                  `file://${__dirname}/build/index.html?rnd=${new Date().getTime()}`
                );
              } else {
                setTimeout(() => {
                  mainWindow.webContents.openDevTools();

                  mainWindow.loadURL(
                    `http://localhost:3001?rnd=${new Date().getTime()}`
                  );
                }, 3000);
              }
            } catch (ex) {
              console.error(ex);
            }
          });
        } catch (ex) {
          console.error(ex);
        }
      });
    }
  }

  function tryFullscreen() {
    try {
      const windowDisplay = screen.getDisplayNearestPoint({
        x: mainWindow.getBounds().x,
        y: mainWindow.getBounds().y,
      });

      if (windowDisplay) {
        resize(windowDisplay);
      }
    } catch (ex) {
      console.error(ex);
    }
  }

  setInterval(() => {
    tryFullscreen();
  }, 5000);

  tryFullscreen();

  globalShortcut.register("CommandOrControl+Shift+K", function () {
    BrowserWindow.getFocusedWindow().webContents.openDevTools();
  });

  mainWindow.webContents.session.webRequest.onHeadersReceived(
    { urls: ["*://*/*"] },
    (d, c) => {
      if (d.responseHeaders["X-Frame-Options"]) {
        delete d.responseHeaders["X-Frame-Options"];
      }
      if (d.responseHeaders["x-frame-options"]) {
        delete d.responseHeaders["x-frame-options"];
      }
      if (d.responseHeaders["content-security-policy"]) {
        delete d.responseHeaders["content-security-policy"];
      }
      if (d.responseHeaders["Content-Security-Policy"]) {
        delete d.responseHeaders["Content-Security-Policy"];
      }
      if (d.responseHeaders["content-security-policy-report-only"]) {
        delete d.responseHeaders["content-security-policy-report-only"];
      }
      if (d.responseHeaders["Content-Security-Policy-Report-Only"]) {
        delete d.responseHeaders["Content-Security-Policy-Report-Only"];
      }

      c({ cancel: false, responseHeaders: d.responseHeaders });
    }
  );

  mainWindow.on("closed", function () {
    globalShortcut.unregisterAll();

    mainWindow = null;
  });
}

ipcMain.on("getProcessArgs", (e) => (e.returnValue = process.argv));

app.on("ready", createWindow);

app.on("child-process-gone", (e, details) => {
  app.quit();
});

app.on("render-process-gone", (e, webContents, details) => {
  app.quit();
});

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

app.on("activate", function () {
  if (mainWindow === null) {
    createWindow();
  }
});

电子版本：

    "@electron-forge/cli": "^7.3.1",
    "@electron-forge/maker-deb": "^7.3.1",
    "@electron-forge/maker-rpm": "^7.3.1",
    "@electron-forge/maker-squirrel": "^7.3.1",
    "@electron-forge/maker-zip": "^7.3.1",
    "electron": "^29.2.0"

希望你能帮助我，

对不起我的英语:)

尝试在React应用程序中使用https://www.npmjs.com/package/powerbi-client-react，没问题，但是当我在iframe中运行这个url时，出现同样的错误 尝试使用沙箱，更改电子设置，但我什么也没发现，除了如果我设置 webSecurity: true

Answer 1

已解决：使用电子 30 解决了错误