如何在Delphi中使用TMS WEB Core在面板中显示PDF文档？

方法一：使用HTML原生嵌入标签（简单快速） #

直接利用HTML的<embed>标签将PDF嵌入到面板对应的DOM元素中，无需额外依赖库，适合快速实现基础显示需求。

实现步骤： #

• 先将你的TPanel设置为Align = alClient，确保嵌入的PDF能占满整个面板空间。
• 在代码中动态创建嵌入元素并添加到面板：

procedure TForm1.FormCreate(Sender: TObject);
var
  EmbedElement: TJSHTMLElement;
begin
  EmbedElement := TJSHTMLElement(document.createElement('embed'));
  // 替换为你的PDF文件路径：本地文件需放在项目www目录，远程地址需确保可访问
  EmbedElement.setAttribute('src', 'sample.pdf');
  EmbedElement.setAttribute('type', 'application/pdf');
  EmbedElement.style.width := '100%';
  EmbedElement.style.height := '100%';
  // 将元素添加到面板的DOM容器中
  Panel1.ElementHandle.appendChild(EmbedElement);
end;

注意事项： #

• 主流浏览器（Chrome、Firefox、Edge）均支持该方式，部分旧浏览器可能兼容性稍差。
• 若使用远程PDF地址，需确保目标服务器配置了CORS允许跨域访问。

方法二：使用PDF.js实现进阶渲染（功能丰富） #

如果需要分页切换、缩放、文本搜索等进阶功能，可以集成PDF.js库，通过Canvas渲染PDF内容，灵活性更强。

实现步骤： #

1. 准备PDF.js文件：下载PDF.js预构建包，将pdf.js和pdf.worker.js复制到项目的www目录下。
2. 引入PDF.js：打开Project -> Web Options -> HTML Template，在模板中添加脚本引用：

   <script src="pdf.js"></script>
   

3. 在面板中渲染PDF：动态创建Canvas元素，调用PDF.js API加载并渲染页面：

procedure TForm1.FormCreate(Sender: TObject);
var
  CanvasElement: TJSHTMLCanvasElement;
begin
  // 创建Canvas元素用于渲染PDF
  CanvasElement := TJSHTMLCanvasElement(document.createElement('canvas'));
  CanvasElement.style.width := '100%';
  CanvasElement.style.height := '100%';
  Panel1.ElementHandle.appendChild(CanvasElement);

  // 通过ASM块调用PDF.js的JavaScript API
  asm
    // 加载目标PDF文件
    pdfjsLib.getDocument('sample.pdf').promise.then(function(pdf) {
      // 获取PDF的第一页（如需多页可循环处理）
      return pdf.getPage(1);
    }).then(function(page) {
      // 设置渲染缩放比例，可根据需求调整
      const viewport = page.getViewport({ scale: 1.2 });
      const canvas = CanvasElement;
      const ctx = canvas.getContext('2d');
      
      // 匹配Canvas尺寸与PDF页面尺寸
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      
      // 将PDF页面渲染到Canvas
      const renderCtx = {
        canvasContext: ctx,
        viewport: viewport
      };
      page.render(renderCtx);
    });
  end;
end;

扩展说明： #

通过PDF.js的API可以进一步实现分页切换、缩放控制、文本选择等功能，具体可参考PDF.js的本地文档进行扩展开发。

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