我已经搜索了一个在模式窗口上显示pdf的方法，我看过有类似问题的帖子。 我已经让它在模态窗口as you can see in this picture
上显示pdf我的问题是，我有一个用户列表（数据表）picture2，您可以在其中查看用户的详细信息，当您单击“pdf”按钮时，通常您应该看到与以下相同的模态你点击数据表外的按钮。我在网络浏览器上收到此错误[picture3
$(document).ready(function() {
// ------------------------------------ the datatables script, when clicking on the plus button, it shows more detail, about -----------------------------------------------
var table = $('#example').DataTable({
"data": testdata.data,
select: "single",
"columns": [{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"render": function() {
return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
},
width: "15px"
},
{
"data": "name"
},
{
"data": "position"
},
{
"data": "office"
},
{
"data": "salary"
}
],
"order": [
[1, 'asc']
]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function() {
var tr = $(this).closest('tr');
var tdi = tr.find("i.fa");
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
tdi.first().removeClass('fa-minus-square');
tdi.first().addClass('fa-plus-square');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
tdi.first().removeClass('fa-plus-square');
tdi.first().addClass('fa-minus-square');
}
});
table.on("user-select", function(e, dt, type, cell, originalEvent) {
if ($(cell.node()).hasClass("details-control")) {
e.preventDefault();
}
});
});
function format(d) {
return '<div class="panel panel-primary">' +
'<div class="panel-heading">' +
'<h3 class="panel-title">Informations du candidat</h3>' +
'</div>' +
'<div class="panel-body">' +
'<div class="row">' +
'<div class="col-md-3 col-lg-3 hidden-xs hidden-sm">' +
'<img class="img-circle" src="https://openclipart.org/download/211821/matt-icons_preferences-desktop-personal.svg?sz=100" alt="User Pic">' +
'</div>' +
'<div class="col-xs-2 col-sm-2 hidden-md hidden-lg">' +
'<img class="img-circle" src="https://openclipart.org/download/211821/matt-icons_preferences-desktop-personal.svg?sz=50" alt="User Pic">' +
'</div>' +
'<div class=" col-md-9 col-lg-9 hidden-xs hidden-sm">' +
'<strong>' + d.name + '</strong><br>' +
'<table class="table table-user-information">' +
'<tbody>' +
'<tr>' +
'<td>Titre: </td>' +
'<td>' + d.position + '</td>' +
'</tr>' +
'<tr>' +
'<td>Date de disponibilité:</td>' +
'<td>' + d.start_date + '</td>' +
'</tr><tr> <td>Salair souhaité:</td>' +
'<td>' + d.salary + '</td>' +
'</tr><tr>' +
'<td>Addresse:</td><td>' + d.office + '</td>' +
'</tr> </tbody></table> </div> </div></div>' +
'<div class="panel-footer">' +
'<a class="btn btn-primary voir-pdf" title="Exemple de PDF dans un « modal »" href="files/test.pdf">PDF</a>' +
' <span class="pull-right">' +
'<button class="btn btn-sm btn-warning" type="button" data-toggle="tooltip"' +
'data-original-title="Edit this user"><i class="glyphicon glyphicon-edit"></i></button>' +
'<button class="btn btn-sm btn-danger" type="button"' +
'data-toggle="tooltip" data-original-title="Remove this user"><i class="glyphicon glyphicon-remove"></i></button>' +
'</span></div></div>';
/* return '<div class="card b-1 hover-shadow mb-20">' +
'<div class="media card-body">' +
'<div class="media-left pr-12">' +
'<img class="avatar avatar-xl no-radius" src="https://openclipart.org/download/211821/matt-icons_preferences-desktop-personal.svg" alt="..."></div>' +
'<div class="media-body">' +
'<div class="mb-2">' +
'<span class="fs-20 pr-16">' + d.name +'</span>'+
'</div>' +
'<small class="fs-16 fw-300 ls-1">'+ d.position +'</small>'+
'</div>' +
'<div class="media-right text-right d-none d-md-block">' +
'<p class="fs-14 text-fade mb-12"><i class="fa fa-map-marker pr-1"></i>' + d.office + '</p>' +
'<span class="text-fade"><i class="fa fa-money pr-1"></i>' + d.salary + '</span>' +
'</div>' +
'</div>' +
'<footer class="card-footer flexbox align-items-center">' +
'<div>' +
'<strong>Applied on:</strong>'+
'<span>' + d.start_date +'</span>' +
'</div>' +
'<div class="card-hover-show">' +
'<a class="btn btn-xs fs-10 btn-bold btn-info" href="#">Download CV</a>' +
'<a class="btn btn-xs fs-10 btn-bold btn-primary" href="#" data-toggle="modal" data-target="#modal-contact">Contact</a>' +
'<a class="btn btn-xs fs-10 btn-bold btn-warning" href="#">Delete</a>' +
'</div>' +
'</footer>' +
'</div>'; */
// `d` is the original data object for the row
/* return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Nom et prénom:</td>' +
'<td>' + d.name + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extension number:</td>' +
'<td>' + d.extn + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extra info:</td>' +
'<td>And any further details here (images etc)...</td>' +
'</tr>' +
'</table>'; */
}
var testdata = {
"data": [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
},
{
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29",
"office": "Edinburgh",
"extn": "6224"
},
{
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28",
"office": "Tokyo",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012/12/02",
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012/08/06",
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010/10/14",
"office": "Tokyo",
"extn": "6200"
},
{
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": "2009/09/15",
"office": "San Francisco",
"extn": "2360"
},
{
"name": "Caesar Vance",
"position": "Pre-Sales Support",
"salary": "$106,450",
"start_date": "2011/12/12",
"office": "New York",
"extn": "8330"
},
{
"name": "Doris Wilder",
"position": "Sales Assistant",
"salary": "$85,600",
"start_date": "2010/09/20",
"office": "Sidney",
"extn": "3023"
},
{
"name": "Angelica Ramos",
"position": "Chief Executive Officer (CEO)",
"salary": "$1,200,000",
"start_date": "2009/10/09",
"office": "London",
"extn": "5797"
},
{
"name": "Gavin Joyce",
"position": "Developer",
"salary": "$92,575",
"start_date": "2010/12/22",
"office": "Edinburgh",
"extn": "8822"
},
{
"name": "Jennifer Chang",
"position": "Regional Director",
"salary": "$357,650",
"start_date": "2010/11/14",
"office": "Singapore",
"extn": "9239"
},
{
"name": "Brenden Wagner",
"position": "Software Engineer",
"salary": "$206,850",
"start_date": "2011/06/07",
"office": "San Francisco",
"extn": "1314"
},
{
"name": "Fiona Green",
"position": "Chief Operating Officer (COO)",
"salary": "$850,000",
"start_date": "2010/03/11",
"office": "San Francisco",
"extn": "2947"
},
{
"name": "Shou Itou",
"position": "Regional Marketing",
"salary": "$163,000",
"start_date": "2011/08/14",
"office": "Tokyo",
"extn": "8899"
},
{
"name": "Michelle House",
"position": "Integration Specialist",
"salary": "$95,400",
"start_date": "2011/06/02",
"office": "Sidney",
"extn": "2769"
},
{
"name": "Suki Burks",
"position": "Developer",
"salary": "$114,500",
"start_date": "2009/10/22",
"office": "London",
"extn": "6832"
},
{
"name": "Prescott Bartlett",
"position": "Technical Author",
"salary": "$145,000",
"start_date": "2011/05/07",
"office": "London",
"extn": "3606"
},
{
"name": "Gavin Cortez",
"position": "Team Leader",
"salary": "$235,500",
"start_date": "2008/10/26",
"office": "San Francisco",
"extn": "2860"
},
{
"name": "Martena Mccray",
"position": "Post-Sales support",
"salary": "$324,050",
"start_date": "2011/03/09",
"office": "Edinburgh",
"extn": "8240"
},
{
"name": "Unity Butler",
"position": "Marketing Designer",
"salary": "$85,675",
"start_date": "2009/12/09",
"office": "San Francisco",
"extn": "5384"
},
{
"name": "Howard Hatfield",
"position": "Office Manager",
"salary": "$164,500",
"start_date": "2008/12/16",
"office": "San Francisco",
"extn": "7031"
},
{
"name": "Hope Fuentes",
"position": "Secretary",
"salary": "$109,850",
"start_date": "2010/02/12",
"office": "San Francisco",
"extn": "6318"
},
{
"name": "Vivian Harrell",
"position": "Financial Controller",
"salary": "$452,500",
"start_date": "2009/02/14",
"office": "San Francisco",
"extn": "9422"
},
{
"name": "Timothy Mooney",
"position": "Office Manager",
"salary": "$136,200",
"start_date": "2008/12/11",
"office": "London",
"extn": "7580"
},
{
"name": "Jackson Bradshaw",
"position": "Director",
"salary": "$645,750",
"start_date": "2008/09/26",
"office": "New York",
"extn": "1042"
},
{
"name": "Olivia Liang",
"position": "Support Engineer",
"salary": "$234,500",
"start_date": "2011/02/03",
"office": "Singapore",
"extn": "2120"
}
]
};
// les informations de chaque candidat
var panels = $('.user-infos');
var panelsButton = $('.dropdown-user');
panels.hide();
//Click dropdown
panelsButton.click(function() {
//get data-for attribute
var dataFor = $(this).attr('data-for');
var idFor = $(dataFor);
//current button
var currentButton = $(this);
idFor.slideToggle(400, function() {
//Completed slidetoggle
if (idFor.is(':visible')) {
currentButton.html('<i class="glyphicon glyphicon-chevron-up text-muted"></i>');
} else {
currentButton.html('<i class="glyphicon glyphicon-chevron-down text-muted"></i>');
}
})
});
$('[data-toggle="tooltip"]').tooltip();
$('button').click(function(e) {
e.preventDefault();
alert("This is a demo.\n :-)");
});
/*
* Le plug-in PDF script for viewing PDF File
*/
(function(a) {
a.twModalPDF = function(b) {
defaults = {
title: "PDF dans un « modal »",
message: "Impossible d’ouvrir le document PDF",
closeButton: true,
scrollable: false
};
var b = a.extend({}, defaults, b);
var c = (b.scrollable === true) ? 'style="max-height: 1020px;overflow-y: auto;"' : "";
html = '<div class="modal fade" id="oModalPDF">';
html += '<div class="modal-dialog modal-lg">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
if (b.title.length > 0) {
html += '<h4 class="modal-title">' + b.title + "</h4>"
}
html += "</div>";
html += '<div class="modal-body" ' + c + ">";
html += b.message;
html += "</div>";
html += '<div class="modal-footer">';
if (b.closeButton === true) {
html += '<button type="button" class="btn btn-primary" data-dismiss="modal">Fermer</button>'
}
html += "</div>";
html += "</div>";
html += "</div>";
html += "</div>";
a("body").prepend(html);
a("#oModalPDF").modal().on("hidden.bs.modal", function() {
a(this).remove()
})
}
})(jQuery);
$(function() {
$('.voir-pdf').on('click', function() {
var sUrl = $(this).attr('href');
var sTitre = $(this).attr('title');
var sIframe = '<object type="application/pdf" data="' + sUrl + '" width="100%" height="500">Aucun support</object>';
$.twModalPDF({
title: sTitre,
message: sIframe,
closeButton: true,
scrollable: false
});
return false;
});
})td.details-control {
text-align: center;
color: forestgreen;
cursor: pointer;
}
tr.shown td.details-control {
text-align: center;
color: red;
}
.user-row {
margin-bottom: 14px;
}
.user-row:last-child {
margin-bottom: 0;
}
.dropdown-user {
margin: 13px 0;
padding: 5px;
height: 100%;
}
.dropdown-user:hover {
cursor: pointer;
}
.table-user-information>tbody>tr {
border-top: 1px solid rgb(221, 221, 221);
}
.table-user-information>tbody>tr:first-child {
border-top: 0;
}
.table-user-information>tbody>tr>td {
border-top: 0;
}
body {
background: #FCFCFC;
}
.pr-12 {
padding-right: 12px !important;
}
.mb-20 {
margin-bottom: 20px !important;
}
.b-1 {
border: 1px solid #ebebeb !important;
}
.card {
border: 0;
border-radius: 0;
margin-bottom: 30px;
-webkit-transition: .5s;
transition: .5s;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, .125);
border-radius: .25rem;
}
.media {
padding: 16px 12px;
-webkit-transition: background-color .2s linear;
transition: background-color .2s linear;
}
.media {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
}
.card-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.media .avatar {
flex-shrink: 0;
}
.no-radius {
border-radius: 0 !important;
}
.avatar-xl {
width: 64px;
height: 64px;
line-height: 64px;
font-size: 1.25rem;
}
.avatar {
position: relative;
display: inline-block;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 100%;
background-color: #f5f6f7;
color: #8b95a5;
text-transform: uppercase;
}
img {
max-width: 100%;
}
img {
vertical-align: middle;
border-style: none;
}
.mb-2 {
margin-bottom: .5rem!important;
}
.fs-20 {
font-size: 20px !important;
}
.pr-16 {
padding-right: 16px !important;
}
.ls-1 {
letter-spacing: 1px !important;
}
.fw-300 {
font-weight: 300 !important;
}
.fs-16 {
font-size: 16px !important;
}
.media-body>* {
margin-bottom: 0;
}
small,
time,
.small {
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 11px;
color: #8b95a5;
}
.fs-14 {
font-size: 14px !important;
}
.mb-12 {
margin-bottom: 12px !important;
}
.text-fade {
color: rgba(77, 82, 89, 0.7) !important;
}
.card-footer:last-child {
border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
}
.card-footer {
background-color: #fcfdfe;
border-top: 1px solid rgba(77, 82, 89, 0.07);
color: #8b95a5;
padding: 10px 20px;
}
.flexbox {
display: -webkit-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.align-items-center {
-ms-flex-align: center!important;
align-items: center!important;
}
.card-footer {
padding: .75rem 1.25rem;
background-color: rgba(0, 0, 0, .03);
border-top: 1px solid rgba(0, 0, 0, .125);
}
.card-footer {
background-color: #fcfdfe;
border-top: 1px solid rgba(77, 82, 89, 0.07);
color: #8b95a5;
padding: 10px 20px
}
.card-footer>*:last-child {
margin-bottom: 0
}
.hover-shadow {
-webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 0.11);
box-shadow: 0 0 35px rgba(0, 0, 0, 0.11)
}
.fs-10 {
font-size: 10px !important;
}
/* Style Modal Bootstrap 4 */
.modal-content {
background-color: #393633;
}
.modal-header {
border: none;
background-color: #393633;
color: #fff;
border-radius: 0;
}
.modal-footer {
padding: 0;
border: none;
}
.modal-footer .btn-primary {
width: 100%;
border-radius: 0;
background-color: #393633;
border-color: #333;
}
.modal-footer .btn-primary:hover {
background-color: #000000;
}
.modal-body {
padding: 0;
background-color: #393633;
}<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a class="btn btn-primary voir-pdf" title="Exemple de PDF dans un « modal »" href="http://www.pdf995.com/samples/pdf.pdf">PDF</a>
<table width="100%" class="display" id="example" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
</body>
</html>
] 3：
资源被解释为文档但以MIME类型传输 应用/ PDF
并且pdf显示在另一个窗口
我真的不知道自己错过了什么：（
答案 0 :(得分：0)
我弄清楚了，在调用创建用户信息面板的函数之后，我只需要放置为pdf显示工作的代码，我在codePen {{1}上编辑代码}
现在代码正常运行。您可以查看用户详细信息，还可以查看其＆＃34; CV＆＃34;在弹出窗口中，希望它有所帮助。
祝你好运
