vue-excel-addin

<h1 id="articleHeader0">vue-excel-addin <a href="https://github.com/trionfo1993/vue-excel-addin" rel="nofollow noreferrer" target="_blank">git地址</a> </h1> <blockquote><p>项目需求 有空就尝试使用vue去构建一个excel addin <br />微软太坑爹了,只给了ng react jquery的教程 <br />文档会尝试中英文双语的</p></blockquote> <h1 id="articleHeader1">使用Vue来构建一个Excel add-in</h1> <p>在这篇文章,你可以看到是如何使用Vue和Excel的JavaScript API来构建一个Excel add-in的</p> <h2 id="articleHeader2">需要</h2> <ul> <li>安装Vue-cli</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install --global vue-cli" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--global vue-cli</span></code></pre> <ul> <li>全局安装最新版本的<a href="https://github.com/yeoman/yo" rel="nofollow noreferrer" target="_blank">Yeoman</a>和<a href="https://github.com/OfficeDev/generator-office" rel="nofollow noreferrer" target="_blank">Yeoman generator for Office Add-ins</a>。</li> </ul> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g yo generator-office" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> -g yo generator-office</code></pre> <h2 id="articleHeader3">生成新的Vue项目</h2> <p>使用vue-cli来搭建脚手架,在命令行输入如下命令:<br /><code>vue init webpack vue-excel-addin</code></p> <h2 id="articleHeader4">生成manifest文件和加入add-in配置</h2> <p>每个add-in都需要一个manifest文件来配置和定义它的功能</p> <ol> <li>进入app文件</li> </ol> <p><code>cd vue-excel-addin</code></p> <ol> <li>使用Yeoman来生成你的add-in的manifest文件, 运行如下命令</li> </ol> <p><code>yo office</code></p> <ul> <li>Would you like to create a new subfolder for your project?: <strong>No</strong> </li> <li>What do you want to name your add-in?: <strong>My Office Add-in</strong> </li> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 652px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 652px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="652" height="163" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:652px;height:163px;"></iframe></ins></ins></ins></div> <li>Which Office client application would you like to support?: <strong>Excel</strong> </li> <li>Would you like to create a new add-in?: <strong>No</strong> </li> </ul> <p>生成工具会问你是否需要打开 <strong>resource.html</strong>.这篇文档无需打开, 当然如果你好奇的话,打开也没关系! 选择 yes 或者 no 让生成工具完成它的工作把!<br /><span class="img-wrap"><img data-src="/img/remote/1460000013014673?w=600&amp;h=461" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="jpg" title="jpg" style="cursor: pointer;"></span></p> <h3 id="articleHeader5">如果你被提示要覆盖 package.json, 选择 No (do not overwrite).</h3> <ol> <li>跟着以下的教程来运行你的excel add-in吧</li> </ol> <h5>注意,请把manifest的相关端口修改为dev默认的8080以及将根目录的assets移入static并修改相关配置</h5> <ul> <li>Windows: <a href="https://docs.microsoft.com/en-us/office/dev/add-ins/testing/create-a-network-shared-folder-catalog-for-task-pane-and-content-add-ins" rel="nofollow noreferrer" target="_blank">Sideload Office Add-ins on Windows</a> </li> <li>Excel Online: <a href="https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-office-add-ins-for-testing#sideload-an-office-add-in-on-office-online" rel="nofollow noreferrer" target="_blank">Sideload Office Add-ins in Office Online</a> </li> <li>iPad and Mac: <a href="https://docs.microsoft.com/en-us/office/dev/add-ins/testing/sideload-an-office-add-in-on-ipad-and-mac" rel="nofollow noreferrer" target="_blank">Sideload Office Add-ins on iPad and Mac</a> </li> </ul> <ol> <li>编辑package.json 给dev脚本添加&#8211;https参数</li> </ol> <h2 id="articleHeader6">更新app</h2> <ol> <li>打开index.html, 把以下的<code>&lt;script&gt;</code>标签添加到<code>&lt;/head&gt;</code>之前</li> </ol> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;https://appsforoffice.microsoft.com/lib/1/hosted/office.js&quot;></script>&#8221; title=&#8221;&#8221; data-original-title=&#8221;复制&#8221;></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://appsforoffice.microsoft.com/lib/1/hosted/office.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <ol> <li>打开src/main.js 将<code>`</code>new Vue({<br /> el: &#8216;#app&#8217;,<br /> components: {App},<br /> template: &#8216;&lt;App/&gt;&#8217;<br />})<code>`</code>替换成以下</li> </ol> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Office.initialize = () => { new Vue({ el: &#8216;#app&#8217;, components: {App}, template: &#8216;<App></App>&#8216; }) }&#8221; title=&#8221;&#8221; data-original-title=&#8221;复制&#8221;></span> </div> </p></div> <pre class="hljs coffeescript"><code>Office.initialize = <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> { <span class="hljs-keyword">new</span> Vue({ el: <span class="hljs-string">'#app'</span>, components: {App}, template: <span class="hljs-string">'&lt;App/&gt;'</span> }) }</code></pre> <ol> <li>打开 src/App.vue, 修改为如下</li> </ol> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template> </p> <div id=&quot;app&quot;> <div id=&quot;content&quot;> <div id=&quot;content-header&quot;> <div class=&quot;padding&quot;> <h1>Hello world!</h1> </p></div> </p></div> <div id=&quot;content-main&quot;> <div class=&quot;padding&quot;> <p>Choose the button below to set the color of the selected range to green.</p> <p> </p> <h3>Try it out</h3> <p> <button @click=&quot;onSetColor&quot;>Set color</button> </div> </p></div> </p></div> </p></div> <p> </template> <script> export default { name: 'App', methods: { onSetColor() { window.Excel.run(async (context) => { const range = context.workbook.getSelectedRange() range.format.fill.color = 'green'; await context.sync() }) } } } </script> </p> <style> #content-header { background: #2a8dd4; color: #fff; position: absolute; top: 0; left: 0; width: 100%; height: 80px; overflow: hidden; } #content-main { background: #fff; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; overflow: auto; } .padding { padding: 15px; } </style> <p> &#8221; title=&#8221;&#8221; data-original-title=&#8221;复制&#8221;></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content-header"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"padding"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello world!<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content-main"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"padding"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Choose the button below to set the color of the selected range to green.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Try it out<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"onSetColor"</span>&gt;</span>Set color<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'App'</span>, <span class="hljs-attr">methods</span>: { onSetColor() { <span class="hljs-built_in">window</span>.Excel.run(<span class="hljs-keyword">async</span> (context) =&gt; { <span class="hljs-keyword">const</span> range = context.workbook.getSelectedRange() range.format.fill.color = <span class="hljs-string">'green'</span>; <span class="hljs-keyword">await</span> context.sync() }) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"> <span class="hljs-selector-id">#content-header</span> { <span class="hljs-attribute">background</span>: <span class="hljs-number">#2a8dd4</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>; <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>; <span class="hljs-attribute">overflow</span>: hidden; } <span class="hljs-selector-id">#content-main</span> { <span class="hljs-attribute">background</span>: <span class="hljs-number">#fff</span>; <span class="hljs-attribute">position</span>: fixed; <span class="hljs-attribute">top</span>: <span class="hljs-number">80px</span>; <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">overflow</span>: auto; } <span class="hljs-selector-class">.padding</span> { <span class="hljs-attribute">padding</span>: <span class="hljs-number">15px</span>; } </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <h2 id="articleHeader7">试一下吧</h2> <ol> <li>在命令行输入以下命令</li> </ol> <h5>Windows:</h5> <p><code>npm start</code></p> <h5>macOs:</h5> <p><code>npm start</code></p> <ol> <li>在Excel中的开始tab, 选择<strong>Show Taskpane</strong>按钮来打开add-in的task pane</li> </ol> <p><span class="img-wrap"><img data-src="/img/remote/1460000013014674?w=650&amp;h=405" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="d" title="d" style="cursor: pointer;"></span></p> <ol> <li>选择任意一个区域的单元格</li> <li>在task pane内, 点击 <strong>Set color</strong>按钮来将选中区域的颜色转为绿色</li> </ol> <p><span class="img-wrap"><img data-src="/img/remote/1460000013014675?w=650&amp;h=406" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p>
脚本宝典为你提供优质服务
脚本宝典 » vue-excel-addin

发表评论

提供最优质的资源集合

立即查看 了解详情