Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容（Demo版）

最终实现功能

主要步骤：写好vue代码>生成密钥>启动代码>在window下创建一个共享文件夹>放入manifest.xml文件>打开excel的加载项>找到共享文件夹>点击加载

环境：

系统是win10

开发使用步骤

1.新建vue2结构

public

index.html

注：这里用cdn的包，不用npm下载的包，那个我下载没成功

javascript 复制代码

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <title>Vue2 Office Add-in</title>
  <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

src

components

HelloExcel.vue

主页代码代码

javascript 复制代码

<template>
	<div class="hello-excel">
		<h2>Vue2 + Office Add-in</h2>
		<button @click="writeData">写入 Excel</button>
		<button @click="readData">读取 Excel</button>
		<p v-if="cellValue">A1 内容：{{ cellValue }}</p>
	</div>
</template>

<script>
import { writeCell, readCell } from '../office';

export default {
	data() {
		return { cellValue: '' };
	},
	methods: {
		async writeData() {
			await writeCell('Hello from Vue!');
		},
		async readData() {
			this.cellValue = await readCell();
		},
	},
};
</script>

<style scoped>
.hello-excel {
	padding: 20px;
	font-family: Arial;
}
button {
	margin-right: 10px;
	padding: 6px 12px;
	cursor: pointer;
}
</style>

App.vue

vue入口

javascript 复制代码

<template>
	<div id="app">
		<HelloExcel />
	</div>
</template>

<script>
import HelloExcel from './components/HelloExcel.vue';

export default {
	components: { HelloExcel },
};
</script>

main.js

javascript 复制代码

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

// Office.js 加载完成后再挂载 Vue
Office.onReady(() => {
	new Vue({
		render: (h) => h(App),
	}).$mount('#app');
});

入口

office.js

这个是调用excel的单元格代码

javascript 复制代码

/* src/office.js */
export async function writeCell(value = 'Hello Vue!') {
	await Excel.run(async (context) => {
		const sheet = context.workbook.worksheets.getActiveWorksheet();
		sheet.getRange('A1').values = [[value]];
		await context.sync();
	});
}

export async function readCell() {
	return await Excel.run(async (context) => {
		const sheet = context.workbook.worksheets.getActiveWorksheet();
		const range = sheet.getRange('A1');
		range.load('values');
		await context.sync();
		return range.values[0][0];
	});
}

localhost+1-key.pem

这个是生成的密钥，需要https才能访问到页面

localhost+1.pem

这个是生成的密钥，需要https才能访问到页面

manifest.xml

这个是要放在共享文件夹中的主要代码，DefaultValue="https://localhost:8080"这里是页面的地址，千万注意要是https的，否则excel那边打不开

javascript 复制代码

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:type="TaskPaneApp">

  <Id>12345678-aaaa-bbbb-cccc-123456789abc</Id>
  <Version>1.0.0.0</Version>
  <ProviderName>Vue Office Addin</ProviderName>
  <DefaultLocale>zh-CN</DefaultLocale>
  <DisplayName DefaultValue="Vue Office Addin"/>
  <Description DefaultValue="A Vue2 Excel Add-in demo"/>

  <Hosts>
    <Host Name="Workbook"/>
  </Hosts>

  <DefaultSettings>
    <SourceLocation DefaultValue="https://localhost:8080"/>
    
  </DefaultSettings>

  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

mkcert.exe这个是下载的生成密钥的工具

package-lock.json这个不用管

package.json这个也没啥

javascript 复制代码

{
	"name": "vue-office-addin",
	"version": "1.0.0",
	"private": true,
	"scripts": {
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build"
	},
	"dependencies": {
		"core-js": "^3.8.3",
		"vue": "^2.7.14"
	},
	"devDependencies": {
		"@vue/cli-service": "^5.0.0",
		"vue-template-compiler": "^2.7.14"
	}
}

vue.config.js

key: fs.readFileSync(path.join(__dirname, 'localhost+1-key.pem')), cert: fs.readFileSync(path.join(__dirname, 'localhost+1.pem')), 注意这两个这两个是生成的密钥地址

javascript 复制代码

const fs = require('fs');
const path = require('path');
module.exports = {
	devServer: {
		https: {
			key: fs.readFileSync(path.join(__dirname, 'localhost+1-key.pem')),
			cert: fs.readFileSync(path.join(__dirname, 'localhost+1.pem')),
		},
		port: 8080,
	},
};

2.生成密钥

https://github.com/FiloSottile/mkcert/releases

去这个地址下载mkcert的windwos64位版本
下载后把它改名为 mkcert.exe
下载之后放到项目根目录下
在右键文件夹中打开cmd控制台输入命令mkcert -install
应该会出现
Created a new local CA
The local CA is now installed in the system trust store!
之后输入命令 mkcert localhost 127.0.0.1
会生成
这两个文件，名字可能和我的不一样，记得在配置文件中改