--- 编辑------------------------------------------- --------------
所以在深入研究了这个问题之后，我意识到问题在于一个简单的 document.getElementByTagName('img') 并修改整个 img 是不合适的，例如，如果你只是想要一些可打印的 img 有一个自定义高度和宽度，您不能只是突然缩小并重新增长所有图像，因此将可打印内容带到隐藏的 div 中，然后在隐藏的 div 中进行所有操作，然后使用该隐藏的 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="bootstrap-css@3.2.0" 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);
})
}
}
])
;