Office Viewer

English | 简体中文 | 繁體中文

Introduction

This extension lets you preview and edit common office and design files directly in VS Code.

• Excel: .xls, .xlsx, .xlsm, .csv, .ods
• Word: .docx, .dotx
• PowerPoint: .pptx, .pptm
• PDF & eBook: .pdf, .epub
• HEIC/TIFF: .heic, .heif, .tiff
• Design: .psd, .xmind, .icns, .svg
• Font: .ttf, .otf, .woff, .woff2
• Markdown: .md, .markdown
• HTML: .html, .htm
• HTTP request: .http, .rest
• Java: .class (decompiler)
• Compressed files: .zip, .jar, .vsix, .rar, .7z, .tar, .tar.gz, .tgz, .apk

Git History

Office Viewer includes a full Git History workspace for exploring repositories without leaving VS Code. Open it from the Source Control view, the editor title bar, the editor context menu, or the file explorer context menu.

Markdown

This extension replaces the default Markdown editor with a WYSIWYG editor.

To use the built-in VS Code Markdown editor instead, add this to your settings.json:

{
    "workbench.editorAssociations": {
        "*.md": "default",
        "*.markdown": "default"
    }
}

Right-click in the editor to export Markdown to PDF, DOCX, or HTML. PDF export requires Chromium; set the browser path with vscode-office.chromiumPath.

Shortcuts: Based on shortcut.md, plus:

• New line: Ctrl+Enter / ⌘ Enter
• Edit hyperlink: Alt+Enter / ^ Enter
• Set CodeMirror language: Alt+Enter / ^ Enter
• Edit in VS Code: Ctrl Alt E / ⌘ ^ E
• Paste as plain text: Ctrl+Shift+V / ⌘ ⇧ V

Other features

• HTML: live preview while editing; press Ctrl+Shift+V to open the live view
• YAML: document outline and anchor navigation (Go to Definition for alias references)
• Icon theme: includes a subset of Material Icon Theme icons, plus Office Material Icon Theme and One Dark Modern color themes
• Excel: preview and save .xlsx, .xls, .xlsm, .csv, and .ods files (saving .xlsx may lose formatting; .csv does not support GBK-encoded Chinese)
• HTTP: send requests from .http and .rest files (integrated from REST Client with fixes for local request issues); press Ctrl+Enter / ⌘ Enter to send
• Java: decompile and view .class files

Sponsor

Database Client for Visual Studio Code, supporting the management of MySQL/MariaDB, PostgreSQL, SQLite, Redis, and ElasticSearch, and works as an SSH client to boost your productivity! Get it now.

Development Guide

Prerequisites

• Node.js 18+
• VS Code 1.64+

Getting started

git clone https://github.com/cweijan/vscode-office.git
cd vscode-office
npm install

Development

Desktop extension (full feature set):

npm run dev

Press F5 in VS Code, or choose Extension from Run and Debug.

Web extension (Markdown, HTML, YAML in the browser):

npm run dev:web

Choose Extension (Web) from Run and Debug.

Build & package

npm run build    # production build
npm run package  # create .vsix

Usage data

Office Viewer collects anonymous usage data to understand which preview features are used, so we can improve the extension. Data is sent to Azure Application Insights via the official @vscode/extension-telemetry module.

What we collect

Event	When	Properties
view.open	A custom preview/editor is opened	viewType (e.g. excel, markdown, pdf), fileType (extension only, e.g. xlsx, md)

We do not collect file paths, file names, URLs, repository names, request contents, or other personally identifiable information.

How to opt out

Telemetry is sent only when both of the following allow it:

1. VS Code global telemetry is enabled (telemetry.telemetryLevel is not off, or telemetry.enableTelemetry is true on older versions).
2. Extension telemetry is enabled: set vscode-office.enableTelemetry to false in Settings.

You can also disable all VS Code telemetry in Settings → Application → Telemetry.

Maintainer setup

If you build and publish this extension yourself, see docs/telemetry.md for Azure Application Insights setup and sample queries.

Credits

• PDF rendering: mozilla/pdf.js
• DOCX rendering: VolodymyrBaydalka/docxjs
• PPTX rendering: pptxviewjs
• XLSX rendering:
  • SheetJS/sheetjs: XLSX parsing
  • myliang/x-spreadsheet: XLSX rendering
• EPUB: futurepress/epub.js
• PSD: ag-psd
• XMind: mind-elixir, @mind-elixir/import-xmind
• HEIC conversion: heic2any
• Java decompiler: JetBrains/java-decompiler
• HTTP: REST Client
• Markdown: Vanessa219/vditor
• Material Icon theme: PKief/vscode-material-icon-theme