Question

我正在网页上显示一些内容和图片。每个图像都有一定的宽度或可能没有指定宽度。当用户单击按钮时，网页上的内容将导出到PDF文件，以便在PDF页面中调整图像，我正在修改图像的宽度和高度，但它会修改宽度和图像的高度。网页也是。如何停止更改网页上图像的宽度和高度。

请查看演示：https://plnkr.co/edit/STVjUB1YMwbOrtYLxR8V?p=preview

在上面的演示插件中，单击导出按钮时，图像的宽度和高度会被修改，以便在将数据导出到PDF时，图像正确地适合PDF页面，并且修改后的图像宽度/高度会发生变化也可以在网页上看到。我如何限制，以便修改后的图像宽度和高度仅应用于PDF文件，但不应用于网页。

html代码：

<button ng-click="export()">export</button>
<div class="myDivClass"..>
 <img src="data:image/jpeg..">
 <img src="..." style="width:400px">
 ..
 //content
</div>

js code：

$scope.export = function() {
         var imagesToResize = document.getElementsByTagName("img");
         for(i=0;i<imagesToResize.length;i++){
            imagesToResize[i].style.width = "100px";
            imagesToResize[i].style.height = "100px";
        }

任何输入都有帮助。

Answer 1

---编辑------------------------------------------- --------------

因此，在深入研究问题后，我意识到问题是一个简单的document.getElementByTagName（'img'）并修改整个img是不合适的，例如，如果你只是想要一些可打印的img来定制高度和宽度，你不能只是突然缩小和重新生长所有图像，所以这是一个更好的方法将您的可打印内容带到隐藏的div然后在隐藏的div做所有的maninpulation然后使用隐藏的div为可打印的内容。我甚至制作了一个git repo，你可以看到并看到你的问题是否得到解决。 git link：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);

             })

         }
     }




 ])

如何修改后恢复图像的宽度和高度

1 个答案: