---編輯------------------------------------------ ---------------
因此，在挖掘了一下問題之後，我意識到問題在於簡單的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);
})
}
}
])
;