Как скопировать HTML источник в буфер обмена? - PullRequest
Новая
       8

Как скопировать HTML источник в буфер обмена?

0 голосов
/ 11 марта 2020

У меня есть сегмент кода, который я хотел бы скопировать и затем вставить в HTML ридер (MS Word или Outlook).

Следует сохранить форматирование HTML, но не вставлять HTML как текст.

У меня есть три функции: 

copyHTMLToClipboard(id:string): void {
    const fromHtml = this._eRef.nativeElement.querySelector(id).innerHTML;
    const newNode = this.render.createElement('div');
    this.render.appendChild(this._eRef.nativeElement, newNode);
    this.render.setProperty(newNode, 'innerHTML', fromHtml);
    this._clipboardService.copyFromContent(fromHtml);
    alert(fromHtml);
  }

  copyToClipboard(): void {
    this._clipboardService.copyFromContent(this.buildFile());
  }

  copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

, вызываемые тремя кнопками: 

<button mat-raised-button (click)="copyMessage(buildFile())" value="click to copy" >Copy</button>
<button mat-raised-button ngxClipboard (click)="buildFile();copyToClipboard()" >Copy</button>
<button mat-raised-button (click)="copyHTMLToClipboard('#ExistingUserBox')">Copy text</button>

buildFile () создает строку кода HTML ниже, поэтому может быть сохранен как файл .htm.

Кнопки / функции пытаются копировать: 

<div class="innerbox layoutbox" id="ExistingUserBox" #ExistingUserBox >
<div class="col editorbox" style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;">
    <div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;" >{{Employee_Name}}</div>
    <div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:400; color:#464646; line-height: 12pt;">{{Employee_Phone}}</div>
</div>
</div>

Все три функции успешно получают HTML в виде текстовой строки, но когда я вставьте его, я получаю всю разметку HTML, а не только форматирование.

Я просмотрел:

Javascript - скопировать весь код html в буфер обмена

Копировать html в буфер обмена (Angular)

и хотя они ссылаются на код, аналогичный тому, что я делаю, ни один из них не отвечает на вопрос, как получить отформатированный код html в буфер обмена.

Я хочу получить это: Джон Доу 123-4567

Вместо того, чтобы получить это: 

<div class="innerbox layoutbox" id="ExistingUserBox" #ExistingUserBox >
<div class="col editorbox" style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;">
    <div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 12pt; font-weight:400; color:#464646; line-height: 16pt;" >John Doe</div>
    <div style="font-family: Lato, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight:bold; color:#002a5f; line-height: 12pt;">123-4567</div>
</div>
</div>

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

https://www.npmjs.com/package/clipboard-polyfill

Работает !!!! 

copyMessage(file: string): void {
    var htmlFile = new clipboard.DT();
    htmlFile.setData("text/html", file);
    clipboard.write(htmlFile);
  }

Файл представляет собой строку, которая включает html. htmlFile - это те же данные в формате text / html clipboard.write - копирует htmlFile в буфер обмена.

Это НЕ будет вставлено как обычный текст, скажем, в Notepad ++.
Но оно будет вставлено в Outlook и MSWord с полностью отформатированным html.

0 голосов
/ 11 марта 2020

Поскольку вы помещаете в буфер обмена необработанные HTML из внутреннего HTML, его не нужно форматировать. Чтобы получить то, что вы хотите, вам нужно вручную отформатировать его, прежде чем поместить в буфер обмена. Вы можете использовать любую библиотеку для форматирования HTML.

...