如何通过Office-JS实现网页中嵌入的Excel与Visio跨组件交互？

Hey Rupert, great question—let’s dig into why your Excel integration isn’t working like Visio, and how to fix it.

Why Your Current Setup Fails for Excel #

The key difference here is how Office 365 handles API access for embedded content:

• Visio’s embedded iframe setup supports direct use of Visio.run because it’s designed to allow API interactions even in standalone embedded contexts (with proper permissions configured).
• Excel’s Excel.run relies on being part of an Excel Task Pane Add-in context. When you embed Excel as a standalone iframe, it doesn’t have the necessary Add-in authentication or context to execute the Excel JavaScript API—this is why your Visio code works but Excel’s doesn’t.

The Solution: Embed Visio in an Excel Task Pane #

Your hunch is correct! Switching to embedding Visio inside an Excel Task Pane Add-in will give you the valid context needed for Excel.run, while still letting you interact with Visio via its API. Here’s how to implement this:

1. Set Up the Excel Task Pane Add-in

• Create a new Excel Task Pane Add-in (you can use the Office Yeoman generator to scaffold this quickly: yo office).
• In the task pane’s HTML, add an iframe pointing to your embedded Visio diagram:

  <iframe id="visio-iframe" src="https://your-visio-embed-url.com" width="100%" height="400px"></iframe>
  <button id="sync-btn">Sync Visio Data to Excel</button>
  

2. Implement Cross-Context Communication with postMessage

Since the Visio iframe and Excel task pane are separate contexts, use window.postMessage to pass data between them. Here’s a sample workflow:

Excel Task Pane JavaScript (handles Excel API and messaging)

Office.initialize = (reason) => {
  // Bind sync button click event after Office initializes
  document.getElementById('sync-btn').addEventListener('click', triggerVisioDataFetch);
};

// Send request to Visio iframe to get selected shape data
function triggerVisioDataFetch() {
  const visioIframe = document.getElementById('visio-iframe');
  visioIframe.contentWindow.postMessage(
    { action: 'getSelectedShape' },
    'https://your-visio-embed-domain.com' // Restrict to your Visio domain for security
  );
}

// Receive data from Visio and update Excel
window.addEventListener('message', (event) => {
  // Validate origin to prevent malicious messages
  if (event.origin !== 'https://your-visio-embed-domain.com') return;

  if (event.data.type === 'shapeData') {
    // Use Excel.run to update the spreadsheet
    Excel.run((context) => {
      const activeSheet = context.workbook.worksheets.getActiveWorksheet();
      // Write Visio shape data to Excel cells
      activeSheet.getRange('A1').values = [[`Shape Name: ${event.data.name}`]];
      activeSheet.getRange('A2').values = [[`Shape Value: ${event.data.value}`]];
      return context.sync();
    }).catch((error) => {
      console.error('Excel update failed:', error);
    });
  }
});

Visio Embedded Page JavaScript (handles Visio API and messaging)

// Listen for requests from Excel task pane
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://your-excel-addin-domain.com') return;

  if (event.data.action === 'getSelectedShape') {
    // Use Visio.run to fetch selected shape data
    Visio.run((context) => {
      const selectedShapes = context.document.getActiveView().shapes.getSelected();
      selectedShapes.load('name,data');
      return context.sync().then(() => {
        const targetShape = selectedShapes.items[0];
        // Send shape data back to Excel task pane
        event.source.postMessage(
          {
            type: 'shapeData',
            name: targetShape.name,
            value: targetShape.data['CustomProperty'] // Replace with your property name
          },
          event.origin
        );
      });
    }).catch((error) => {
      console.error('Visio data fetch failed:', error);
    });
  }
});

3. Verify Permissions and Deployment

• Ensure your Excel Task Pane Add-in has the necessary permissions in its manifest (e.g., ReadWriteDocument for full spreadsheet access).
• Deploy the add-in to your Office 365 tenant so it’s available in Excel online/desktop.

Key Takeaways #

• Standalone Excel iframes don’t provide the context needed for Excel.run—you need to use an Excel Task Pane Add-in.
• Use postMessage to safely communicate between the Visio iframe and Excel task pane.
• This setup maintains full access to both Visio.run and Excel.run APIs, enabling the cross-tool interaction you’re aiming for.

内容的提问来源于stack exchange，提问作者RupertB