使用SPFx一行代码实现Office 365文档库Modern UI中批量签出文档

Office 365中的文档库在经典UI （Classic UI）中是可以批量签出文档的：

但是当切换到现代UI（Modern UI）的时候，却无法批量签出文档了，当选择多个文档时，在顶部命令栏和下拉菜单中都没有签出的选项。只能单个签出：

如果使用SPFx可以使用一行代码就在Modern UI中实现批量签出文档的功能。下面来看如何实现。

开始之前需要配置SPFx开发环境

然后使用Yeoman模板创建一个SharePoint Framework提供的CommandSet解决方案。首先创建一个“checkout-demo”文件夹，然后打开powershell，进入这个文件夹下，运行：

yo @microsoft/sharepoint

启动spfx项目创建向导，对于向导提出的问题，如下回答，即可开始创建spfx项目：

创建完成后显示成功的图标:

（如果创建失败，试一下翻 墙）

使用Code打开项目，修改config文件夹下的serve.json文件，将“pageUrl”替换成你的文档库的Url：

打开CheckoutDemoCommandSet.manifest.json文件，将"Command One" 改为“Check out”（如果提示代码中的注释有错误，可以删掉注释）:

打开代码文件"CheckoutDemoCommandSet.ts"，将如下代码中的“===”改为“>=”:

最后将代码：

Dialog. alert( ` ${ this. properties. sampleTextOne } `);

注释掉，然后添加我们的一行代码：

for(let element of event.selectedRows) {sp.web.getFileByServerRelativeUrl(element.getValueByName('FileRef')).checkout().then(_ => {}).catch(e=>console.log(e));}

我们看到有一个错误提示，这是因为找不到sp这个对象，因为我们还没有将这个对象引入进来。为了解决这个错误，首先让我们在Code中打开控制台：

运行如下命令行，使用npm向我们的项目中按照PnP包：

npm i --save @pnp/sp @pnp/common @pnp/odata @pnp/logging

安装结束后，使用如下代码导入sp对象：

保存所有文件，这时候错误没有了。

在terminal中运行下面代码启动调试：

gulp serve

Code会自动打开刚刚指定的文档库，并且弹出一个对话框，点击“Load debug scripts”

当我们选择两个文档的时候，“Check out”按钮就显示出来了，点击运行，所选择的文档就会立刻被签出了。