javascript - 推特 Bootstrap : Print content of modal window-6ren

javascript - 推特 Bootstrap : Print content of modal window

转载作者：IT王子更新时间：2023-10-29 03:03:23

25

4

我正在使用 Bootstrap 开发一个网站，该网站有 28 个模态窗口，其中包含不同产品的信息。我希望能够在打开的模式窗口中打印信息。每个窗口都有一个 id。

<!-- firecell panel & radio hub -->
           <div class="modal hide fade" id="fcpanelhub">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">X</button>
                <h3>5000 Control Panel & Radio Hub</h3>
              </div>
              <div class="modal-body">
                <img src="../site/img/firecell/firecell-panel-info-1.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-panel-info-2.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-radio-hub-info-1.png" alt=""/><hr/>
                <img src="../site/img/firecell/firecell-radio-hub-info-2.png" alt=""/>
              </div>
              <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">Close</a>
              </div>    
           </div>

因此，如果我在 modal-footer 中添加一个新按钮 - “打印”，并且单击它我希望打印该模态。我说将使用 javascript 是否正确？如果是这样，我如何告诉 javascript 只打印打开模式，而不打印其他模式？

感谢所有帮助。

最佳答案

另一种解决方案

这是一个基于 Bennett McElwee answer 的新解决方案在same question如下所述。

已使用 IE 9 和 10、Opera 12.01、Google Chrome 22 和 Firefox 15.0 进行测试。
jsFiddle example

1.) 将此 CSS 添加到您的站点:

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

2.) 添加我的 JavaScript 函数

function printElement(elem, append, delimiter) {
    var domClone = elem.cloneNode(true);

    var $printSection = document.getElementById("printSection");

    if (!$printSection) {
        $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }

    if (append !== true) {
        $printSection.innerHTML = "";
    }

    else if (append === true) {
        if (typeof (delimiter) === "string") {
            $printSection.innerHTML += delimiter;
        }
        else if (typeof (delimiter) === "object") {
            $printSection.appendChild(delimiter);
        }
    }

    $printSection.appendChild(domClone);
}

您已准备好打印网站上的任何元素!
只需使用您的元素调用 printElement() 并在完成后执行 window.print()。

注意:如果您想在打印之前修改内容(并且仅在打印版本中)，请查看此示例(由 waspina 在评论中提供):http://jsfiddle.net/95ezN/121/

也可以使用 CSS 来在打印版中显示附加内容(并且仅在打印版中)。

原解

我认为，您必须通过 CSS 隐藏网站的所有其他部分。

最好将所有不可打印的内容移动到单独的 DIV 中:

<body>
  <div class="non-printable">
    <!-- ... -->
  </div>

  <div class="printable">
    <!-- Modal dialog comes here -->
  </div>
</body>

然后在你的 CSS 中:

.printable { display: none; }

@media print
{
    .non-printable { display: none; }
    .printable { display: block; }
}

学分转到Greg谁已经回答了类似的问题:Print <div id="printarea"></div> only?

使用 JavaScript 存在一个问题:用户无法看到预览 - 至少在 Internet Explorer 中是这样!

关于javascript - 推特 Bootstrap : Print content of modal window，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12181760/

25

4

0

文章推荐： javascript - 一种检查 HTML5 表单有效性的方法？

文章推荐： go - 在golang中连接uuid

文章推荐： Golang 常量 unsafe.Sizeof

文章推荐： json - 嵌套 JSON 中的相同结构

css - 如果有一个 --> .content p, .content ul, .content li, .content a，什么是 SASS 方法？
什么是 SASS 方法要求干燥这样的东西: .content p, .content ul, .content li, .content a 最佳答案这 4 个元素都有共同的样式吗？ .conten
contentful - 使用 Contentful 检索内容类型的更友好方式
我正在评估 Contentful.com 作为 Angular SPA 的内容引擎。我面临的问题是按内容类型检索条目(例如，获取“博客”类型的所有条目)。如 documentation exampl
javascript - CSS : add content to an element is `content: "text to add";` as remove content from an element is ` ? 中的等价物是什么？？？？`
在我编辑的主 wiki 上有一个名为 Item: 的自定义命名空间，提示是该命名空间内的每个页面都显示为 Item:This_item - - Item:That_item -- Item:Foo_i
Can not uploading content to WordPress folder /wp-content/uploads/woocommerce_uploads/(无法将内容上载到WordPress文件夹/wp-Content/Uploads/WooCommerce_Uploads/)
我正在尝试编写一个Python脚本，可以将图片和pdf上传到WordPress。我希望图像上传到文件夹‘/wp-Content/Uploads/’，将pdf文件上传到文件夹‘/wp-Content/U
contentful - 如何监控 Contentful API 的使用情况？
是否可以监控进行了多少次 Contentful API 调用，并理想地在即将超过配额时收到通知？谢谢最佳答案当然，您可以在右侧用户配置文件的下拉菜单 > Organizations and Bi
content-disposition - Content-Disposition 文件名中的分号
我在尝试在 IE8 中下载带有分号的文件名时遇到问题。 Response.AddHeader("Content-Disposition", "attachment; filename=\"" + at
contentful - 如何通过 Contentful Delivery API 查看内容条目的语言环境
我在 Contentful Delivery API 中运行查询以返回基于它的 slug 的特定页面项目。这个查询还设置了语言环境，以便它只返回我需要呈现的语言的数据。但是，我还需要设置页面的 hr
contentful - 如何在 Gatsby 中处理 Contentful 内容数据
我有兴趣使用 Gatsby建一个Netlify使用来自 Contentful 的内容的静态网站 Netlify 有这个不错的 Gatsby 入门指南: https://www.netlify.com/
git - 如何修复git中的 "modified content, untracked content"？
目标是提交一个 git 分支。分支的“git status”的输出是: On branch zeromq_new Your branch is up to date with 'origin/zero
c# - 设置 content in C#
我目前正在学习在 ASP.NET 3.5 和 C# 中使用 MasterPages 和 ContentPlaceHolders - 现在，我正在拼命尝试通过我的编程代码编辑 asp:Content-C
java - 如何比较两个文本文件的内容并返回 "Same Content"或 "Different Content"？
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
html - 如何在 content 和 content::before 上使用不透明度而不重叠
我使用 bootstrap 3 作为我的网格框架和 CSS 来创建一个具有一个倾斜/倾斜边缘的半透明区域，但由于分层不透明度，我的元素遇到了问题。期望是中心是倾斜的，但右侧仍然是正方形。有没有更好
java - 非法参数异常 : Unknown URL content://CONTENT
IllegalArgumentException: 未知 URL 内容:// ^ 对上述内容做了噩梦。我检查了我的变量和路径，但看不出问题是什么？非常感谢任何指点! 这是我的痕迹。 java.lan
javascript - 尝试通过扩展元素填充 polymer 元素的
我有两个元素:一个是元素，另一个是元素。 populated-drop-down extends drop-down ，但是，正如您可能已经猜到的那样，它会尝试使用一些选项预先填充它。假设我可以简
ruby - 产量 :content doesn't show content_for :content
我想我也有同样的问题。 Using multiple yields to insert content 我尝试了这个解决方案。我试过在我的 application.html.erb 中有 conte
html - justify-content 和 align content 的默认值是什么？
此链接 ( https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ) 表示 justify-content 和 align-content 的
cocoa - "Content Values"和 "Content Objects"有什么区别
我现在正在探索绑定(bind)，并且有一个 NSPopUpButton - 它为我提供了一些值选择下的绑定(bind)选项 - Content , Content Objects , Content
Xamarin 形式 : Content View doesn't display in content page
正在尝试在内容页面中加载内容 View 。当我运行代码时，它不会出现在我的内容 View 中。我正在从我的内容页面分配两个可绑定(bind)参数。内容页面: 内容 View :
javascript - 获取 :before content and printing special characters from content
我想从我的 :before 标签中获取 content。我知道有些人会说它不是真正的(伪)元素，但在 JS 中有一种方法，但有人可以帮助我在 JQ 中做到这一点，因为我有多个标签并且我想用 $.eac
Linux : mail send file content as mail content
我创建了一个.sh脚本，并将结果记录在一个文件中，执行后我会尝试将文件内容作为mail正文发送。这是我运行的命令: sh update.sh >> update.$(date +"%Y-%m-%d:

首页

博学

6Ren·AI

商城