在处理图书文字预览功能时，面临了多个问题，包括实现透明背景 pdf 预览、自定义文本样式(首行缩进、字体间距、两端对齐等)和图片预览的精确控制等等。
之前介绍过 pdf 预览的几种方式，具体可以看之前的文章前端 pdf 在线预览
新项目的 UI 设计中，pdf 预览时背景为透明的，能看到底部的背景样式，这样更漂亮；而且有一些特定的标题及文字样式需求。
1.pdf 预览
使用 pdf 预览时，一般默认的颜色就是白色，pdf 文件能不能制作为透明的，而且预览时也是透明的效果，没有实践过。。。。。。希望大佬们能给出些建议
网上有些方案，可供参考，例如：
- Canvas：将 PDF 页面转换为 SVG 或 Canvas 元素，这两种格式支持透明度设置。利用 PDF.js 的渲染能力，提取 PDF 页面内容为 SVG 路径或 Canvas 绘图，然后通过 CSS 设置背景透明。
增加 pdfjs 高亮显示的处理
useEffect(() => {
// 自动高亮跳转
const iframe = iframeRef.current;
if (iframe?.contentDocument) {
const document = iframe.contentDocument;
// 默认赋值搜索框内容 利用组件功能高亮显示
const input = document.getElementById("findInput") as HTMLInputElement;
const highAll = document.getElementById("findHighlightAll");
if (curSubmenu.title && input && highAll) {
// 对查询输入框进行赋值
input.value = curSubmenu.title;
// 点击高亮按钮实现高亮显示关键词
highAll.click();
}
}
}, [curSubmenu]);
2.文字预览
将图书文字内容提取出来，当然我们项目的内容不多，可以使用这种方式。
项目提供了 word 文档，可以将 pdf 或者 word 文档中的内容提取出来，通过 json 数据进行处理。
数据多的话，这种方式就挺吃亏的了。
渲染内容时，每段首行需要空两格，可以使用text-indent: 2em;实现；而字间距使用了letter-spacing实现。效果如下所示：
> p {
letter-spacing: 3px;
font-size: 22px;
font-family: "A02";
text-indent: 2em;
}
但是也会存在一些显示问题，例如：text-indent和letter-spacing同时使用时，会导致段首空两格失效，文字对不齐
要解决文字对不齐的问题，有如下方法
解决办法一：不使用letter-spacing，使用带有字间距的字体即可
解决办法二：首行缩进方式不使用text-indent了，可以使用::before实现。
实现效果如下所示：
> p {
letter-spacing: 3px;
font-size: 22px;
font-family: "A02";
/* text-indent: 2em; */
}
> p::before {
content: "";
display: inline-block;
width: 50px; // 22*2+3*2
}
3.图片预览
按照编辑出版的要求，避免符号出现在段首、禁止单个文字或符号独占一行、段落内容左右对齐等等
如下所示，中文、英文、数字由于字符宽度不同而导致的对齐问题
前端可以通过两端对齐text-align: justify;优化一下，但是这种宽度差异会导致排版时难以均匀分布空白，尤其是英文和数字较多的行可能会显得比纯中文的行“稀疏”，影响整体的视觉效果。
> p {
letter-spacing: 3px;
font-size: 22px;
font-family: "A02";
text-align: justify;
}
但是符号出现在段首、禁止单个文字或符号独占一行这种通过 css 无法控制，通过 js 控制也很难，毕竟文字是自适应宽度的，不能确保显示的位置。
只能是那种固定的显示，在内容准备阶段解决，比如在编辑文档时避免在行末放置标点符号，或使用排版软件的高级功能来自动调整。通过前端展示层面来处理，难度较大。
最后的权宜之计就是使用透明图片预览(将图书文字内容处理成透明图片)，手动控制，只能说搞编辑内容的开发不容易，要注意的细节太多了
