html包括文本内容,截断包含HTML的文本,忽略标签

我已经按照您的建议编写了一个将HTML截断的函数,但是没有打印出来,而是将其保存在字符串变量中。也处理HTML实体。

/**

*  function to truncate and then clean up end of the HTML,

*  truncates by counting characters outside of HTML tags

*

*  @author alex lockwood, alex dot lockwood at websightdesign

*

*  @param string $str the string to truncate

*  @param int $len the number of characters

*  @param string $end the end string for truncation

*  @return string $truncated_html

*

*  **/

public static function truncateHTML($str, $len, $end = '…'){

//find all tags

$tagPattern = '/(]*)>?|&[\w#]+;/i';  //match html tags and entities

preg_match_all($tagPattern, $str, $matches, PREG_OFFSET_CAPTURE | PREG_SET_ORDER );

//WSDDebug::dump($matches); exit;

$i =0;

//loop through each found tag that is within the $len, add those characters to the len,

//also track open and closed tags

// $matches[$i][0] = the whole tag string  --the only applicable field for html enitities

// IF its not matching an &htmlentity; the following apply

// $matches[$i][1] = the start of the tag either '

// $matches[$i][2] = the tag name

// $matches[$i][3] = the end of the tag

//$matces[$i][$j][0] = the string

//$matces[$i][$j][1] = the str offest

while($matches[$i][0][1] < $len && !empty($matches[$i])){

$len = $len + strlen($matches[$i][0][0]);

if(substr($matches[$i][0][0],0,1) == '&' )

$len = $len-1;

//if $matches[$i][2] is undefined then its an html entity, want to ignore those for tag counting

//ignore empty/singleton tags for tag counting

if(!empty($matches[$i][2][0]) && !in_array($matches[$i][2][0],array('br','img','hr', 'input', 'param', 'link'))){

//double check

if(substr($matches[$i][3][0],-1) !='/' && substr($matches[$i][1][0],-1) !='/')

$openTags[] = $matches[$i][2][0];

elseif(end($openTags) == $matches[$i][2][0]){

array_pop($openTags);

}else{

$warnings[] = "html has some tags mismatched in it:  $str";

}

}

$i++;

}

$closeTags = '';

if (!empty($openTags)){

$openTags = array_reverse($openTags);

foreach ($openTags as $t){

$closeTagString .="".$t . ">";

}

}

if(strlen($str)>$len){

// Finds the last space from the string new length

$lastWord = strpos($str, ' ', $len);

if ($lastWord) {

//truncate with new len last word

$str = substr($str, 0, $lastWord);

//finds last character

$last_character = (substr($str, -1, 1));

//add the end text

$truncated_html = ($last_character == '.' ? $str : ($last_character == ',' ? substr($str, 0, -1) : $str) . $end);

}

//restore any open tags

$truncated_html .= $closeTagString;

}else

$truncated_html = $str;

return $truncated_html;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML2Canvas是一个将HTML DOM元素转换为canvas的JavaScript库,而jspdf是一个用于生成PDF文档的JavaScript库。因此,您可以使用HTML2Canvas将HTML DOM元素转换为Canvas,然后使用jspdf将Canvas转换为PDF。 要处理分页图片和被截断文本问题,您可以使用以下步骤: 1. 将HTML DOM元素转换为Canvas。您可以使用HTML2Canvas库来完成此操作。请确保在转换时包含所有的分页图片和文本。 2. 将所有的Canvas合并在一起,以便生成单个PDF文件。您可以使用canvas.toDataURL()方法将每个Canvas转换为图像数据URL。然后,将所有的图像数据URL合并在一起,并使用jspdf将它们转换为PDF。 3. 处理被截断文本。如果文本截断,您可以使用CSS的white-space属性来处理它。例如,您可以设置white-space:pre-wrap属性来打破单词并允许文本换行。 4. 处理分页图片。如果您有分页图片,您可以将它们分成多个Canvas,并将它们一起合并到PDF中。这将确保每个分页图片都在正确的位置显示。 总的来说,使用HTML2Canvas和jspdf生成PDF文档是一个十分强大的工具。通过遵循上述步骤,您可以轻松地处理文本截断和分页图片的问题,并生成高质量的PDF文件。 ### 回答2: html2canvas是一个javascript库,用于将HTML元素渲染为Canvas,并提供了将Canvas导出为图片的功能。而jspdf是另一个javascript库,用于生成PDF文件。 使用html2canvas和jspdf可以实现在前端生成PDF文件的功能。首先,使用html2canvas将HTML页面的内容渲染为Canvas。然后,将Canvas转换为图像数据,并将图像数据添加到jspdf的PDF文件中。最后,可以将生成的PDF文件保存或下载。 但是在处理分页时,把整个HTML页面转换为Canvas,可能会导致图片和文字被截断的问题。这是因为Canvas在渲染时有大小限制。 为了解决这个问题,可以通过在特定位置手动分页来控制页面内容的展示。首先,确定每一页需要展示的内容,并在对应的位置手动分页。具体的做法是使用CSS的page-break属性来设置页面的分页位置,以确保每一页不会出现图片和文字被截断的情况。 在使用html2canvas时,可以通过设置ignoreElements属性来忽略某些元素不进行渲染,以避免被截断。例如,对于需要分页的图片,可以在转换为Canvas时,将其设置为忽略的元素,保证图片完整显示在各个页面中。 总而言之,使用html2canvas和jspdf可以在前端实现PDF文件的生成,但处理分页时需要注意图片和文字被截断的问题。通过手动设置分页位置和忽略特定元素,可以解决这个问题,确保生成的PDF文件中的内容完整可读。 ### 回答3: html2canvas是一个JavaScript库,可以将HTML元素转换为canvas画布,并且可以配合jspdf库生成PDF文件。 要处理分页图片和文字被截断的问题,可以按照以下步骤进行: 1. 引入html2canvas和jspdf库。 2. 创建一个用于生成PDF的按钮或者其他触发事件。 3. 使用html2canvas库将需要转换为PDF的HTML元素转换为canvas画布。可以使用html2canvas()方法,并将需要转换的元素传递给该方法。 4. 使用toDataURL()方法将canvas画布转换为一个base64编码的图像字符串。 5. 创建一个jspdf实例。可以使用`new jsPDF()`创建一个新的jspdf实例。 6. 使用jspdf的addImage()方法将之前生成的base64编码的图像字符串添加到页面上。可以通过指定x、y坐标和图像的宽度和高度来设置图像在PDF中的位置和尺寸。 7. 使用jspdf的save()方法保存生成的PDF文件。 对于分页图片和文字被截断的问题,html2canvas和jspdf并不能自动处理。可以通过以下方法来解决: 1. 对于图片,可以在将HTML元素转换为canvas之前,通过调整元素的尺寸、位置或者裁剪来确保图片完整显示在一个页面中。 2. 对于文字,可以通过调整元素的字体大小、行高或者缩减内容来确保文字完整显示在一个页面中。 3. 如果需要处理多页的情况,可以使用循环或者递归的方式将分页的内容分别转换为canvas,并通过jspdf的addPage()方法在PDF中添加新的页面。 总结来说,通过html2canvas和jspdf配合使用,可以在前端生成PDF文件。对于处理分页图片和文字被截断的问题,需要手动调整HTML元素的尺寸、位置和内容,以确保完整显示在PDF中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值