我花了最后几天的问题解决了如何从导出到HTML的聊天备份中删除数千张图片,因为它占用了不必要的打印空间。
我已经了解到JQuery和/或Javascript将是实现这一目标的最佳和最简单的方法。我已经查看了许多不同类型的示例,而且没有一个示例适用于此HTML文档。他们在独立的测试文档上工作,所以我对它出错的地方感到茫然。
注意:阅读时间太长了?跳过''标签后,有很多不必要的格式化。
原始HTML代码段
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang='en'>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta charset='utf-8'>
<title>WeChat</title>
<style media='screen'>
body {
padding: 0;
margin: 0;
font: 1em/1.4 Helvetica, Cambria, Georgia, sans-serif;
color: #333;
font-size: 12px;
background: #fff;
}
.date {
text-align: center;
}
#container {
width: 500px;
padding: 0 0 50px;
margin: 0 auto;
}
h3 {
font-size: 14px;
font-weight: bold;
font-style: normal;
text-align: left;
color: #272727;
}
.triangle-isosceles {
background: #F0F0F0;
word-break: break-all;
width: 200px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
background: -o-linear-gradient(#F0F0F0, #F0F0F0);
background: linear-gradient(#F0F0F0, #F0F0F0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.content {
width: 400px;
position: relative;
z-index: 1;
}
.triangle-isosceles2 {
background: #D2F6CB;
word-break: break-all;
width: 200px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2F6CB), to(#D2F6CB));
background: -moz-linear-gradient(#D2F6CB, #D2F6CB);
background: -o-linear-gradient(#D2F6CB, #D2F6CB);
background: linear-gradient(#D2F6CB, #D2F6CB);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.triangle-isosceles3 {
background: #D0EDFA;
word-break: break-all;
width: 200px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0EDFA), to(#D0EDFA));
background: -moz-linear-gradient(#D0EDFA, #D0EDFA);
background: -o-linear-gradient(#D0EDFA, #D0EDFA);
background: linear-gradient(#D0EDFA, #D0EDFA);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
hr {
height: 1px;
border: 0;
border-bottom: 1px dotted #cccccc;
margin: 0;
}
.imgdic {
left: 170px;
position: relative;
}
.triangle-isosceles-map {
background: #F0F0F0;
word-break: break-all;
width: 220px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
background: -o-linear-gradient(#F0F0F0, #F0F0F0);
background: linear-gradient(#F0F0F0, #F0F0F0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.content {
width: 400px;
position: relative;
z-index: 1;
}
.triangle-isosceles-map2 {
background: #D2F6CB;
word-break: break-all;
width: 220px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2F6CB), to(#D2F6CB));
background: -moz-linear-gradient(#D2F6CB, #D2F6CB);
background: -o-linear-gradient(#D2F6CB, #D2F6CB);
background: linear-gradient(#D2F6CB, #D2F6CB);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
img {
border-style: none;
}
a {
text-decoration: none
}
</style>
<style media='print'>
body {
padding: 0;
margin: 0;
font: 1em/1.4 Helvetica, Cambria, Georgia, sans-serif;
color: #333;
font-size: 12px;
background: #fff;
}
.date {
text-align: center;
}
#container {
width: 500px;
padding: 0 0 50px;
margin: 0 auto;
}
h3 {
font-size: 14px;
font-weight: bold;
font-style: normal;
text-align: left;
color: #272727;
}
.triangle-isosceles {
background: #F0F0F0;
word-break: break-all;
width: 200px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
background: -o-linear-gradient(#F0F0F0, #F0F0F0);
background: linear-gradient(#F0F0F0, #F0F0F0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.content {
width: 400px;
position: relative;
z-index: 1;
}
.triangle-isosceles2 {
background: #D0EDFA;
word-break: break-all;
width: 200px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0EDFA), to(#D0EDFA));
background: -moz-linear-gradient(#D0EDFA, #D0EDFA);
background: -o-linear-gradient(#D0EDFA, #D0EDFA);
background: linear-gradient(#D0EDFA, #D0EDFA);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.triangle-isosceles3 {
background: #D2F6CB;
word-break: break-all;
width: 200px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2F6CB), to(#D2F6CB));
background: -moz-linear-gradient(#D2F6CB, #D2F6CB);
background: -o-linear-gradient(#D2F6CB, #D2F6CB);
background: linear-gradient(#D2F6CB, #D2F6CB);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
hr {
height: 1px;
border: 0;
border-bottom: 1px dotted #cccccc;
margin: 0;
}
.imgdic {
left: 170px;
position: relative;
display: none;
}
.triangle-isosceles-map {
background: #F0F0F0;
word-break: break-all;
width: 220px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
background: -o-linear-gradient(#F0F0F0, #F0F0F0);
background: linear-gradient(#F0F0F0, #F0F0F0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.content {
width: 400px;
position: relative;
z-index: 1;
}
.triangle-isosceles-map2 {
background: #D0EDFA;
word-break: break-all;
width: 220px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0EDFA), to(#D0EDFA));
background: -moz-linear-gradient(#D0EDFA, #D0EDFA);
background: -o-linear-gradient(#D0EDFA, #D0EDFA);
background: linear-gradient(#D0EDFA, #D0EDFA);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.triangle-isosceles-map3 {
background: #D2F6CB;
word-break: break-all;
width: 220px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2F6CB), to(#D2F6CB));
background: -moz-linear-gradient(#D2F6CB, #D2F6CB);
background: -o-linear-gradient(#D2F6CB, #D2F6CB);
background: linear-gradient(#D2F6CB, #D2F6CB);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
</style>
<head>
<body>
<h1 align=center> WeChat</h1>
<div id='container'>
<div class='content'>
<p>
<img width='28' height='28' align='left' src='media/chat_single.png' />
<h3 style='word-break:break-all;word-wrap:break-word'> Title Here</h3>
</p>
<p class='date'><font color='#b4b4b4'>-------------------------------------------------------------
<p class='date'><font color='#b4b4b4'>01/13/2017 18:05:00</font>
</p>
<p class='triangle-isosceles2'><font color='#4D4D4D'> Random Chat Log </font>
</p>
<p class='imgdic'>
<p class='date'><font color='#b4b4b4'>01/13/2017 17:10:14</font>
</p>
<p class='triangle-isosceles'>
<a href='media/01-13-2017 17_10_14.jpg' target='_blank'>
<img src='media/01-13-2017 17_10_14.jpg' style='vertical-align:middle; width:100px;' />
</a>
</p>
<p class='imgdic'>
<img src='media/3l.png' style='top:-47px;left:-176px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 16:35:02</font>
</p>
<p class='triangle-isosceles'>
<a href='media/01-13-2017 16_35_02.jpg' target='_blank'>
<img src='media/01-13-2017 16_35_02.jpg' style='vertical-align:middle; width:100px;' />
</a>
</p>
<p class='imgdic'>
<img src='media/3l.png' style='top:-47px;left:-176px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 16:35:00</font>
</p>
<p class='triangle-isosceles'>
<a href='media/01-13-2017 16_35_00.jpg' target='_blank'>
<img src='media/01-13-2017 16_35_00.jpg' style='vertical-align:middle; width:100px;' />
</a>
</p>
<p class='imgdic'>
<img src='media/3l.png' style='top:-47px;left:-176px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 15:54:36</font>
</p>
<p class='triangle-isosceles2'><font color='#4D4D4D'> Random Chat Log </font>
</p>
<p class='imgdic'>
<img src='media/1l.png' style='top:-47px;left:208px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 15:48:18</font>
</p>
<p class='triangle-isosceles2'><font color='#4D4D4D'> Random Chat Log </font>
</p>
<p class='imgdic'>
<img src='media/1l.png' style='top:-47px;left:208px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 15:48:12</font>
</p>
<p class='triangle-isosceles2'><font color='#4D4D4D'> Random Chat Log </font>
</p>
我尝试过什么
<!-- First Attempt !-->
element.classList.remove("imgdic");
$("class").removeClass("imgdic");
<!-- Second attempt !-->
$("#div img").remove();
<!-- Third attempt !-->
$().ready(function() {
$("img").load(function() {
$(this).remove();
});
});
如果有人有任何建议或反馈,请告诉我!
答案 0 :(得分:0)
<!-- Second attempt !-->
$(".content img").remove();
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang='en'>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta charset='utf-8'>
<title>WeChat</title>
<style media='screen'>
body {
padding: 0;
margin: 0;
font: 1em/1.4 Helvetica, Cambria, Georgia, sans-serif;
color: #333;
font-size: 12px;
background: #fff;
}
.date {
text-align: center;
}
#container {
width: 500px;
padding: 0 0 50px;
margin: 0 auto;
}
h3 {
font-size: 14px;
font-weight: bold;
font-style: normal;
text-align: left;
color: #272727;
}
.triangle-isosceles {
background: #F0F0F0;
word-break: break-all;
width: 200px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
background: -o-linear-gradient(#F0F0F0, #F0F0F0);
background: linear-gradient(#F0F0F0, #F0F0F0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.content {
width: 400px;
position: relative;
z-index: 1;
}
.triangle-isosceles2 {
background: #D2F6CB;
word-break: break-all;
width: 200px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2F6CB), to(#D2F6CB));
background: -moz-linear-gradient(#D2F6CB, #D2F6CB);
background: -o-linear-gradient(#D2F6CB, #D2F6CB);
background: linear-gradient(#D2F6CB, #D2F6CB);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.triangle-isosceles3 {
background: #D0EDFA;
word-break: break-all;
width: 200px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0EDFA), to(#D0EDFA));
background: -moz-linear-gradient(#D0EDFA, #D0EDFA);
background: -o-linear-gradient(#D0EDFA, #D0EDFA);
background: linear-gradient(#D0EDFA, #D0EDFA);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
hr {
height: 1px;
border: 0;
border-bottom: 1px dotted #cccccc;
margin: 0;
}
.imgdic {
left: 170px;
position: relative;
}
.triangle-isosceles-map {
background: #F0F0F0;
word-break: break-all;
width: 220px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
background: -o-linear-gradient(#F0F0F0, #F0F0F0);
background: linear-gradient(#F0F0F0, #F0F0F0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.content {
width: 400px;
position: relative;
z-index: 1;
}
.triangle-isosceles-map2 {
background: #D2F6CB;
word-break: break-all;
width: 220px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2F6CB), to(#D2F6CB));
background: -moz-linear-gradient(#D2F6CB, #D2F6CB);
background: -o-linear-gradient(#D2F6CB, #D2F6CB);
background: linear-gradient(#D2F6CB, #D2F6CB);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
img {
border-style: none;
}
a {
text-decoration: none
}
</style>
<style media='print'>
body {
padding: 0;
margin: 0;
font: 1em/1.4 Helvetica, Cambria, Georgia, sans-serif;
color: #333;
font-size: 12px;
background: #fff;
}
.date {
text-align: center;
}
#container {
width: 500px;
padding: 0 0 50px;
margin: 0 auto;
}
h3 {
font-size: 14px;
font-weight: bold;
font-style: normal;
text-align: left;
color: #272727;
}
.triangle-isosceles {
background: #F0F0F0;
word-break: break-all;
width: 200px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
background: -o-linear-gradient(#F0F0F0, #F0F0F0);
background: linear-gradient(#F0F0F0, #F0F0F0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.content {
width: 400px;
position: relative;
z-index: 1;
}
.triangle-isosceles2 {
background: #D0EDFA;
word-break: break-all;
width: 200px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0EDFA), to(#D0EDFA));
background: -moz-linear-gradient(#D0EDFA, #D0EDFA);
background: -o-linear-gradient(#D0EDFA, #D0EDFA);
background: linear-gradient(#D0EDFA, #D0EDFA);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.triangle-isosceles3 {
background: #D2F6CB;
word-break: break-all;
width: 200px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2F6CB), to(#D2F6CB));
background: -moz-linear-gradient(#D2F6CB, #D2F6CB);
background: -o-linear-gradient(#D2F6CB, #D2F6CB);
background: linear-gradient(#D2F6CB, #D2F6CB);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
hr {
height: 1px;
border: 0;
border-bottom: 1px dotted #cccccc;
margin: 0;
}
.imgdic {
left: 170px;
position: relative;
display: none;
}
.triangle-isosceles-map {
background: #F0F0F0;
word-break: break-all;
width: 220px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#F0F0F0), to(#F0F0F0));
background: -moz-linear-gradient(#F0F0F0, #F0F0F0);
background: -o-linear-gradient(#F0F0F0, #F0F0F0);
background: linear-gradient(#F0F0F0, #F0F0F0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.content {
width: 400px;
position: relative;
z-index: 1;
}
.triangle-isosceles-map2 {
background: #D0EDFA;
word-break: break-all;
width: 220px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D0EDFA), to(#D0EDFA));
background: -moz-linear-gradient(#D0EDFA, #D0EDFA);
background: -o-linear-gradient(#D0EDFA, #D0EDFA);
background: linear-gradient(#D0EDFA, #D0EDFA);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
.triangle-isosceles-map3 {
background: #D2F6CB;
word-break: break-all;
width: 220px;
left: 170px;
position: relative;
padding: 10px;
margin: 1em 0 3em;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#D2F6CB), to(#D2F6CB));
background: -moz-linear-gradient(#D2F6CB, #D2F6CB);
background: -o-linear-gradient(#D2F6CB, #D2F6CB);
background: linear-gradient(#D2F6CB, #D2F6CB);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(media/pie.htc);
}
</style>
<head>
<body>
<h1 align=center> WeChat</h1>
<div id='container'>
<div class='content'>
<p>
<img width='28' height='28' align='left' src='media/chat_single.png' />
<h3 style='word-break:break-all;word-wrap:break-word'> Title Here</h3>
</p>
<p class='date'><font color='#b4b4b4'>-------------------------------------------------------------
<p class='date'><font color='#b4b4b4'>01/13/2017 18:05:00</font>
</p>
<p class='triangle-isosceles2'><font color='#4D4D4D'> Random Chat Log </font>
</p>
<p class='imgdic'>
<p class='date'><font color='#b4b4b4'>01/13/2017 17:10:14</font>
</p>
<p class='triangle-isosceles'>
<a href='media/01-13-2017 17_10_14.jpg' target='_blank'>
<img src='media/01-13-2017 17_10_14.jpg' style='vertical-align:middle; width:100px;' />
</a>
</p>
<p class='imgdic'>
<img src='media/3l.png' style='top:-47px;left:-176px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 16:35:02</font>
</p>
<p class='triangle-isosceles'>
<a href='media/01-13-2017 16_35_02.jpg' target='_blank'>
<img src='media/01-13-2017 16_35_02.jpg' style='vertical-align:middle; width:100px;' />
</a>
</p>
<p class='imgdic'>
<img src='media/3l.png' style='top:-47px;left:-176px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 16:35:00</font>
</p>
<p class='triangle-isosceles'>
<a href='media/01-13-2017 16_35_00.jpg' target='_blank'>
<img src='media/01-13-2017 16_35_00.jpg' style='vertical-align:middle; width:100px;' />
</a>
</p>
<p class='imgdic'>
<img src='media/3l.png' style='top:-47px;left:-176px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 15:54:36</font>
</p>
<p class='triangle-isosceles2'><font color='#4D4D4D'> Random Chat Log </font>
</p>
<p class='imgdic'>
<img src='media/1l.png' style='top:-47px;left:208px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 15:48:18</font>
</p>
<p class='triangle-isosceles2'><font color='#4D4D4D'> Random Chat Log </font>
</p>
<p class='imgdic'>
<img src='media/1l.png' style='top:-47px;left:208px; position:Absolute' />
</p>
<p class='date'><font color='#b4b4b4'>01/13/2017 15:48:12</font>
</p>
<p class='triangle-isosceles2'><font color='#4D4D4D'> Random Chat Log </font>
</p>
&#13;
答案 1 :(得分:0)
这会解决您的问题吗?
$('a').remove();
$('img').remove();
或者你可以用一条消息说明那里有一张图片。