如何在Forge Viewer自定义Docking Panel启用文本选择或导出内容？

一、启用文本选择功能 #

自定义Docking Panel默认可能被Viewer全局样式或面板自身设置阻止了文本选择，可通过以下方式开启：

• 覆盖CSS样式：给面板内容容器添加user-select: text属性，用!important强制覆盖Viewer的默认禁止选择样式：

  .your-panel-content * {
    user-select: text !important;
  }
  

• 避免禁用选择的类名：如果你基于Autodesk.Viewing.UI.DockingPanel创建面板，不要给容器添加adsk-no-select这类Viewer内置的禁止选择类。
• 检查DOM结构：确保面板内的文本元素没有被设置user-select: none的内联样式或类规则。

二、内容导出方案（若文本选择无法启用） #

导出为.txt格式 #

遍历面板内的文本节点，提取内容后生成下载链接：

// 假设面板内容容器的DOM元素为panelContent
const textSegments = Array.from(panelContent.querySelectorAll('div, p, span'))
  .map(el => el.textContent.trim())
  .filter(content => content); // 过滤空内容
const fullText = textSegments.join('\n');

// 生成下载
const blob = new Blob([fullText], { type: 'text/plain' });
const downloadUrl = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = downloadUrl;
link.download = 'panel-content.txt';
link.click();
URL.revokeObjectURL(downloadUrl); // 释放资源

导出为.pdf格式 #

可借助前端库实现，以下是两种常见方式：

1. 纯文本导出（使用jsPDF）

import jsPDF from 'jspdf';

const doc = new jsPDF();
const textSegments = Array.from(panelContent.children)
  .map(el => el.textContent.trim())
  .filter(content => content);

// 逐行添加文本到PDF
textSegments.forEach((text, index) => {
  doc.text(text, 10, 15 + index * 10); // 控制位置与行间距
});
doc.save('panel-content.pdf');

2. DOM转PDF（结合html2canvas与jsPDF）

如果需要保留面板的排版样式，可先将面板转为图片再插入PDF：

import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

html2canvas(panelContent).then(canvas => {
  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgWidth = 210; // A4宽度
  const imgHeight = canvas.height * imgWidth / canvas.width;
  let remainingHeight = imgHeight;
  let yPosition = 0;

  pdf.addImage(imgData, 'PNG', 0, yPosition, imgWidth, imgHeight);
  remainingHeight -= 297; // A4高度

  // 处理长内容分页
  while (remainingHeight >= 0) {
    yPosition = remainingHeight - imgHeight;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', 0, yPosition, imgWidth, imgHeight);
    remainingHeight -= 297;
  }
  pdf.save('panel-content.pdf');
});

内容的提问来源于stack exchange，提问作者Clara