个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:39:58 35 4
gpt4 key购买 nike

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

请找到演示:https://plnkr.co/edit/STVjUB1YMwbOrtYLxR8V?p=preview

在上面的 demo plunker 中，当点击导出按钮时，图像的宽度和高度被修改，以便当数据被导出到 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代码:

$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";
        }

任何输入都是有帮助的。

最佳答案

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

所以在深入研究这个问题之后，我意识到问题是一个简单的 document.getElementByTagName('img') 和修改整个 img 是不合适的，例如，如果你只是想让一些可打印的 img 有一个自定义高度和宽度，你不能突然缩小并重新增长所有图像，所以最好的方法是将可打印内容带到隐藏的 div，然后在隐藏的 div 中进行所有操作，然后使用隐藏的 div 打印内容.我什至制作了一个 git repo，你可以看到它是否解决了你的问题。混帐链接: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);

             })

         }
     }




 ])

;

关于javascript - 如何在修改后恢复图像的宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47233915/

35 4 0
文章推荐： html - Flexbox - 如何更改列的顺序？
文章推荐： html - 将按钮放在内联 block div 旁边
文章推荐： c++ - 如何将元素定义为与随机访问迭代器指向的元素类型相同？
文章推荐： html - 是否有机会改变 facebook 发送按钮的样式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com