Javascript Print div在chrome中不起作用，并且没有将样式作为链接_Javascript_Jquery_Html_Css_Google Chrome

Javascript Print div在chrome中不起作用，并且没有将样式作为链接

javascript jquery html css google-chrome

Javascript Print div在chrome中不起作用，并且没有将样式作为链接,javascript,jquery,html,css,google-chrome,Javascript,Jquery,Html,Css,Google Chrome,我在用这个使用此jquery打印div，但它在chrome中不起作用，它还需要在同一页面中使用内部样式，并且不能使用外部css <html> <head> // code <link rel="stylesheet" rel="stylesheet" media="screen" href="style.css"> <link rel="stylesheet" href="https://maxcdn.bootstra

我在用这个

使用此jquery打印div，但它在chrome中不起作用，它还需要在同一页面中使用内部样式，并且不能使用外部css

<html>
<head>
// code
        <link rel="stylesheet" rel="stylesheet" media="screen" href="style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootssstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="jquery.print.js.js"></script>

       <script>
        $(document).ready(function(){ 
            // Hook up the print link.
            $("#print_div").click(function(){
                alert("asd");
                // Print the DIV.
                    $( ".printable" ).print();
                    // Cancel click event.
                    return( false );
                });
            });

        </script>
      <head>  
      <body>

// code
<div class="container text-center">
    <a href="#" class="btn btn-primary btn-lg print" id="print_div" >Print</a>
</div>
   <div class="printable">
       // section that need to be printed
       // images, css form 
       // code
</div>
<body>
    </html>


//代码
$（文档）.ready（函数（）{
//连接打印链接。
$（“#打印分区”）。单击（函数（）{
警报（“asd”）；
//打印DIV。
$（“.printable”）.print（）；
//取消单击事件。
返回（假）；
});
});
//代码
//需要打印的部分
//图像，css表单
//代码

有没有更好的建议，我们可以在哪里整合

if（opt.importcs）$（“link[rel=stylesheet]”）。每个（函数（）{
var href=$（this.attr（“href”）；
如果（href）{
var media=$（this.attr（“media”）| |“all”；
$doc.find（“head”）。追加（“”）
}
});

编辑、更新

“使用引导程序1，其cdn相同…”尝试。对

maxcdn

的https协议请求返回

403禁止

错误。尝试分别在

link

和

script

元素

href

和

src

属性处用

http

协议替换

https

协议。应用的样式应反映在

.container

，

.btn

元素中

注意，

.printable

类不出现在

html

操作中？不确定在可打印的

上应用哪些特定样式<问题结束时引用的链接
元素的code>href

？在chrome 37进行审判

试一试

html

$（函数（）{
$（“.print”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（（“正文*：不（.printable）”）.hide（函数（）{
$（“.printable”）.addClass（“打印样式”）；
//$（“标题”）。附加（“{
//“href”：“url”
//“rel”：“样式表”
// });
window.print（）
}).promise（）.done（函数（el）{
$（“.printable”）.removeClass（“printstyle”）；
el.show（）
});
})
})

jsfiddle

如果可能，可以描述“需要样式在同一页面中，并且不能使用导入的css。”？

链接

元素的

href

的url是什么？应用于

.printable

div

的特定

样式是什么？注意，.printable
类不出现在html的OP中？它会阻止页面上的其他jquery事件，并且不会静止使用外部css。尝试与我使用的相同，但它不适用于外部css和chrome。如果可能，可以发布外部css url吗，外部css文本？你有什么解决方案吗。。或者我应该使用一些php打印选项，如mpdf或html2pdfu，它们在同一页面上使用css，这将起作用，但当您加载打印中的内容时，外部css不会反映。。
if (opt.importCSS) $("link[rel=stylesheet]").each(function() {
                var href = $(this).attr("href");
                if (href) {
                    var media = $(this).attr("media") || "all";
                    $doc.find("head").append("<link type='text/css' rel='stylesheet' href='" + href + "' media='" + media + "'>")
                }
            });

<div class="container text-center">
    <a href="#" class="btn btn-primary btn-lg print" id="print_div">Print</a>
</div>
<!-- added `printable` class to `div` to be be printed -->
<div class="printable">
       stuff to print
</div>

/* `printable` styles to be applied before print, removed after print */
.printstyle {    
    font-size : 36px;
}

$(function() {
    $(".print").on("click", function(e) {
      e.preventDefault();
        $("body *:not(.printable)").hide(function() {
          $(".printable").addClass("printstyle");
            // $("head").append("<link>", {
            // "href":"url"
            // "rel":"stylesheet"
            // });
            window.print()
        }).promise().done(function(el) {
          $(".printable").removeClass("printstyle");  
          el.show()
        });
    })
})