Chrome默认PDF阅读器中getSelection.toString()返回空，如何获取选中文本？

我制作了一个包含按钮的简单HTML页面，通过iframe展示PDF文件。点击按钮时需要获取PDF中选中的文本并存入变量，但尝试使用getSelection.toString()后始终返回空字符串，当前使用Chrome默认PDF阅读器，求实现方法。

现有代码 #

JavaScript 代码 #

$(document).ready(function() {

  $("#btn-get-selection").on("click", function(e) {
    var iframe = document.getElementById('iframe');
    var idoc = iframe.contentDocument || iframe.contentWindow.document;
    var text = idoc.getSelection().toString();

    // 始终返回空字符串
    console.log(text);
  })
});

HTML 代码 #

<button id="btn-get-selection" class="btn btn-primary">Get Selection</button>

<iframe id="iframe" src="sample.pdf" width="100%" height="500" frameborder="0"></iframe>

当前问题 #

点击按钮后控制台始终输出空字符串：

解决方案 #

Chrome默认PDF阅读器运行在独立的沙箱环境中，受浏览器同源策略和沙箱限制，无法通过常规的iframe内容文档操作获取选中的文本。

可行的解决方式是替换为PDF.js来渲染PDF文件：

• PDF.js是Mozilla开发的开源PDF渲染库，完全在浏览器端运行，不受Chrome默认阅读器的沙箱限制
• 使用PDF.js后，可以通过其提供的API直接获取用户选中的文本内容，原有逻辑适配后即可正常工作

快速部署PDF.js的步骤 #

• 下载PDF.js的预构建包（包含viewer.html和相关核心文件）
• 将预构建包放入项目目录中
• 修改iframe的src指向PDF.js的viewer.html并传入PDF文件路径，例如：<iframe src="pdfjs/web/viewer.html?file=sample.pdf" ...>
• 通过PDF.js的getSelection()方法或监听文本选中事件来获取选中内容

内容的提问来源于stack exchange，提问作者Anis R.