---编辑------------------------------------------ ---------------
因此，在挖掘了一下问题之后，我意识到问题在于简单的document.getElementByTagName（'img'）并修改整个img是如果你只是想让一些可打印的img具有自定义的高度和宽度，那么你不能只是突然缩小和重新生长所有的图像，所以这是一个更好的方法，把你的可打印内容带到一个隐藏的div中，然后隐藏的div会执行所有的maninpulation，然后使用该隐藏的div来打印可打印的内容。我甚至做了一个git repo，你可以看到，看看你的问题是否解决了。 git链接：https://github.com/sagarb3/jspdf-demo
在git链接中，我将下载的图像保存为图像的base64，使整个事情变得有点丑陋。我甚至修改了一些功能
我没有jspdf很好的理解，但我想出了最后一个办法
这是我的index.html现在的样子
<!doctype html>
<html ng-app="app">
<head>
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<!--<script src="html2canvas.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.33/vfs_fonts.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="listController">
<button ng-click="export()">export</button>
<div id="content-div">
<div id="{{value.pageIndex}}" ng-repeat="(key, value) in employees" class="myDivClass" style="background-color:white">
<h1><span style="background-color: yellow">{{value.pageIndex}}</span>
<div>
<h1>
<p style="color:red"> {{value.pageHeader}}</p></h1>
</div>
<p> A variation of the ordinary lorem ipsum text has been used in typesetting since the 1960s or earlier, when it was popularized by advertisements for Letraset transfer sheets. It was introduced to the Information Age in the mid-1980s by Aldus Corporation, which employed it in graphics and word-processing templates for its desktop publishing program PageMaker.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas elementum justo sed placerat.</p>
<img alt="" src="download2.jpg" class="image-responsive" style="width: 800px;" />
<img src="download.png" style="width: 400px;" />
<h1>One more image</h1>
<h1>This is last line displayed in the page</h1>
</div>
</div>
</div>
<div id="pdf-content" style="display:none">
</div>
</body>
</html>
这是带解决方案的js文件：
var app = angular.module("app", []);
app.controller("listController", ["$scope", '$timeout',
function($scope, $timeout) {
$scope.employees = [{ pageIndex: "div1", pageHeader: "This should be shown in page1" },
{ pageIndex: "div2", pageHeader: "This should be shown in page2" }
];
$scope.export = function() {
var pdf = new jsPDF('p', 'pt', 'A4');
var pdfName = 'test.pdf';
var vDom = $('#pdf-content').html($('#content-div').html());
//console.log(vDom);
var elementHandler = {
'#skipExport': function(element, renderer) {
return true;
}
}
var options = {
'elementHandlers': elementHandler
};
function formatHtml() {
var imagesToResize = document.getElementById('pdf-content').getElementsByTagName("img");
for (i = 0; i < imagesToResize.length; i++) {
(function(i) {
imagesToResize[i].style.width = "100px";
imagesToResize[i].style.height = "100px";
})(i);
}
return new Promise(function(resolve, reject) {
resolve('success');
reject('err');
})
}
formatHtml().then(function(res) {
$("#pdf-content").find(".myDivClass").each(function(index) {
pdf.fromHTML($(this).html(),15, 20, options, function(){
pdf.addPage();
})
})
$timeout(function() {
pdf.save(pdfName);
}, 3000);
})
}
}
])
;