有时候我们复制html到word,在word中会出现边框.

word提供了一个选择性粘贴方案,可以去掉样式,但是这不好,我们复制html,希望尽可能的包浏样式.
实际上会出现边框,是div层级的锅.

假设要复制的html元素是这样的:
<div id="container">
<h1>奥宏科技</h1>
<p>一切为了再生产个</p>
</div>

如果使用js的createRange接口直接选择container,执行复制,那么复制到word中,第二行开始会有一个边框,
经过我的测试,如果复制的时候,container没有被复制走,里面的内容被复制了,那么不会出现边框.
问题明朗了,我们可以直接使用Range对象选择里面的子类,但是在谷歌下比较麻烦,因为谷歌浏览器不能多次addRange,其实这可以通过css控制,

给container设置cssuser-select:none,给container的子类设置cssuser-select:all,这样在执行复制的时候,container不会被选中,里面的被选中,复制到word中就不会出现表格了.

本人按照公司领导要求，去网上找一个公司软件工程质量管理体系说明的说明书

但是

1、下载需要下载券，我又不是经常下载，开通vip不舍得

2、复制又复制不了

 

解决方案

1、把这个文档的名称，完完整整的输入到百度搜索框里

2、仔细看这里有一个百度快照，点击百度快照



3、下面就有完整的文档内容，可以复制的！哈哈哈，不用钱



 

 

今天收到客户的改进意见，原本我们有一个批量上传excel文档的功能，后台进行数据验证，验证数据某行某列有错误时，会将错误信息以数组的形式返回给前端。

原本我的实现方法是在前端直接遍历后端返回的报错消息，进行拼接，将某行、某列的错误信息这样直接用NoticeProvider中封装好的方法展示出来，实现的代码如下（typescript）：

......
import { NoticeProvider } from '../../../../../../providers/common/utils/notice';


@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.scss']
})
export class AddComponent implements OnInit {
  ......
  fileList = [];
  fileInfoList = [];

  constructor(
     ......
    private notice: NoticeProvider,
  ) {
     ......
  }

  ngOnInit() {
    ......
  }



  /**
* 开始、上传进度、完成、失败都会调用这个函数。
*/
  handleChange({ file, fileId, fileName, filePath }): void {
    const status = file.status;
    if (status === 'done') {
      if (file.response.status === 0) {
        this.notice.info('上传成功');
        this.fileList.forEach(item => {
          fileId = item.response.data.id;
          fileName = item.name;
          filePath = item.response.data.url;
        });
        this.fileInfoList.push({ fileId, fileName, filePath });
        file.response.data.successList.forEach(item => {
          this.priceConfirmReqs.push(item);                    // 保存上传的文件内容
        });
      } else if (file.response.status === 90001) {
        this.notice.error(file.response.message);
      } else {
        const errorRowMes = [];
        file.response.data.errorList.forEach(element => {
          const errorCloMes = [];
          element.errorFields.forEach(element1 => {
            errorCloMes.push('第' + (element1.cellIndex + 1) + '列：' + element1.column + element1.errorMessage);
          });
          errorRowMes.push('第' + (element.rowIndex) + '行：' + '【' + errorCloMes + '】' + '<br>');
        });
        this.notice.error('上传失败,原因：' + errorRowMes);
        this.fileList.splice(this.fileList.length - 1, 1);
      }
    }
  }

  ......
}


其中this.notice.error的效果是直接在网页上方弹出提示信息，几秒种后就会消失。

客户提出意见，说网页上方弹出提示的效果不是很方便，当上传了几百几千条数据，提示框中的内容会非常多，往往还没有看清楚所有的报错消息，提示框就消失了，这样不利于他们的修改。

原本我们的最优解决方案是将用户导入的Excel表格，在每一个错的单元格中标红，再返回给用户，但是后端小哥哥说现在这个功能没时间实现，所以提出第二个解决方案，就是前端使用模态框弹出报错信息，因为模态框弹出后，用户自己点击关闭才会消失，而且模态框中想要有一个一键复制的按钮，点击后就可以将错误信息拷贝出来供修改。

这样就要用到NzModalService的功能了，我们新写一个页面，用作模态框的内容展示，在导入的页面上（上级页面）将报错信息传给模态框：

首先上级页面，也就是导入页面我们这样处理：

......
import { NzModalService, UploadFile } from 'ng-zorro-antd';
import { ErrorRowMesComponent } from './error-row-mes/error-row-mes.component';

@Component({
  selector: 'app-add',
  templateUrl: './add.component.html',
  styleUrls: ['./add.component.scss']
})
export class AddComponent implements OnInit {


  ......
  fileList = [];
  fileInfoList = [];

  constructor(
    private modalService: NzModalService,
    ......
  ) {
  }

  ngOnInit() {
    ......
  }

  ......

  /**
* 开始、上传进度、完成、失败都会调用这个函数。
*/
  handleChange({ file, fileId, fileName, filePath }): void {
    const status = file.status;
    if (status === 'done') {
      if (file.response.status === 0) {
        this.notice.info('上传成功');
        this.fileList.forEach(item => {
          fileId = item.response.data.id;
          fileName = item.name;
          filePath = item.response.data.url;
        });
        this.fileInfoList.push({ fileId, fileName, filePath });
        file.response.data.successList.forEach(item => {
          this.priceConfirmReqs.push(item);                    // 保存上传的文件内容
        });
      } else if (file.response.status === 90001) {
        this.notice.error(file.response.message);
      } else {
        const errorRowMes = [];
        file.response.data.errorList.forEach(element => {
          const errorCloMes = [];
          element.errorFields.forEach(element1 => {
            errorCloMes.push('第' + (element1.cellIndex + 1) + '列：' + element1.column + element1.errorMessage);
          });
          errorRowMes.push('第' + (element.rowIndex) + '行：' + '【' + errorCloMes + '】' + '<br>');
        });
        // 弹窗提示报错信息
        this.modalService.create({
          nzTitle: '上传失败',
          nzContent: ErrorRowMesComponent,
          nzWidth: 600,
          nzFooter: null,
          nzComponentParams: {
            data: {
              errorRowMes: errorRowMes
            }
          },
        });
        this.fileList.splice(this.fileList.length - 1, 1);
      }
    }
  }
  ......
}


弹出的模态框即显示ErrorRowMesComponent组件中的内容，这个弹出的页面我们这样处理：

import {
  Component,
  OnInit,
  Input
} from '@angular/core';
import * as _ from 'lodash';
import { NzModalRef } from 'ng-zorro-antd';
import { NoticeProvider } from '../../../../../../../providers/common/utils/notice';

@Component({
  selector: 'app-error-row-mes',
  templateUrl: './error-row-mes.component.html',
  styleUrls: ['./error-row-mes.component.scss']
})
export class ErrorRowMesComponent
  implements OnInit {
  errorRowMes = '';
  @Input()
  set data(value: any) {
    this.errorRowMes = value.errorRowMes;
  }

  constructor(
    private modal: NzModalRef,
    private notice: NoticeProvider
  ) {
  }

  ngOnInit(): void {
  }

  doCopy(errorRowMes) {
    const oInput = document.createElement('input');
    oInput.value = errorRowMes;
    document.body.appendChild(oInput);
    oInput.select();
    document.execCommand('Copy');
    oInput.style.display = 'none';
    this.notice.success('复制成功');
}

  /**
   * 取消
   * @param e
   */
  handleCancel() {
    this.modal.destroy({ data: null });
  }
}


其中：

@Input()
  set data(value: any) {
    this.errorRowMes = value.errorRowMes;
  }

是从上级页面接收了报错的消息到模态框页面中。

一键复制的方法我们这样实现，将以下方法绑定到按钮即可：

doCopy(errorRowMes) {
    const oInput = document.createElement('input');
    oInput.value = errorRowMes;
    document.body.appendChild(oInput);
    oInput.select();
    document.execCommand('Copy');
    oInput.style.display = 'none';
    this.notice.success('复制成功');
}


注意我们在html中，想要实现上级传过来的一些展示的样式，最好使用innerHTML进行展示：

<div class="ql-editor" [innerHTML]="errorRowMes"></div>

实现的效果如下图所示：

问题：运行在服务器上以及有多个复本的数据库难免会出现复制与保存冲突的情况。如何处理这种情况是所有Notes管理员和设计者都要面对的问题。

复制与保存冲突可由以下原因造成：

在两次复制之间，如果有两个用户同时编辑或多个用户编辑了不同数据库复本上的相同文档，就会出现复制冲突。如果有两个或多个用户同时编辑同一个数据库的同一个文档，则会出现保存冲突。

解决方法：

一、可以在表单属性框中的基本付签选中：“合并复制冲突”，并知底功能表单基本付签中的版本选项。

二、在这里介绍一些和处理复制与保存冲突情况有关的方法与技巧：

1、创建列出所有冲突文档的视图：（VewConflict）冲突文档都包含一个名为“$Conflict”的域，因此可以用下面的试图选择公式列出所有冲突文档。

 

1 SELECT @ISAvailable("$Conflict")

 

 

2、将冲突文档与主文档同屏显示以便比较两者之间的差别：由于冲突文档被保存为主文档的答复文档，在打开冲突文档以后使用快捷图标“显示/隐藏预览主文档”，主文档就会被显示在预览窗格中了。

3、附加菜单命令比较两个文档之间的差别：在Notes.ini文件中加入下面一行：

AddInMenus=C:\Notes\nntediff.dll

然后重起Notes,就回发现“操作”菜单中多了一项“Different of 2 document”.  

4、找到冲突文档的主文档：

Sub Click(Source as Button)

Const FolderName="ReplicationConFlict"

dim s As New NotesSession

dim doccol as NotesDocumentCollection

dim doc as Notesdocument,topdoc as notesdocument

dim folder as notesView

set dbcur=s.currentdatabase

set doccol.dbcur.unprocesseddocuments

set doc=doccol.getfirstdocument

while not(doc is nothing)

set topdoc=gettopdoc(doc)

call topdoc.putinfolder(Foldername)

set doc=doccol.getnextdocument(doc)

wend

End Sub

Function GetTopDoc(DocSource as notesDocument) as NotesDocument

dim doctop as notesdocument dim strUNID as String

set doctop=docsource

strUNID=doctop.ParentDocumentUNID  

Do While (strUNID<>"")

set DocTop=dbCur.GetDocumentByUNID(StrUNID)

strUNID=doctop.ParentdocumentUNID

loop

set GetTopDoc=doctop

End Functiong  

  

5、将冲突文档保存为主文档选种若干冲突文档后运行下面代理。这个代理把选种的冲突文档保存为主文档。

dim s as new notessession

set db=s.currentdatabase

set dc=db.unprocessedDocuments

set doc=dc.getfirstdocument '$conflict是冲突文档的标志

call doc.removeItem("$Conflict") '得到冲突文档的主文档

if doc.isResponse then

Set Parent=db.GetDocumentByUNID(doc.ParentDocumentUNID)

if parent.IsResponse then '如果文档是答复的答复

dim GrandParant as Notesdocument

Set GrandParant=db.GetDocumentByUNID(Parent.ParentDocumentUNID)

call doc.MakeResponse(GrandParent) else '$Ref 域是答复文档的标志

call doc.RemoveItem("$Ref")

end if

end if

call doc.save(True,True)  

当使用LS在后台创建文档的时候，表单中“合并复制冲突”选项无效，在文档中加入下面代码： doc.$Conflicts="1"