CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede Spicey Nybegynder
18. marts 2013 - 04:46 Der er 11 kommentarer og
1 løsning

Udskrivning af bestemte områder i et langt html dokument.

Hej eksperter.

Jeg har et meget langt html dokument bestående af forskellige sange, hvor jeg vil gøre det muligt at udskrive fra position A til position B (at udskrive pågældende sang( ved hjælp af tryk på en knap. Sangen har jeg gjort udskrivnings-venlig og derfor er hele dokumentet delt op med page-break. Jeg vil gerne at man kan udskrive den enkelte sang og KUN den.
Det gør ikke noget at der generes en ny side som man kan udskrive, men jeg vil helst at det hele bliver holdt i det aktuelle html dokument.

Eks.:
Her har jeg en længere tekst
Her har jeg en tabel med mange sange (der er link (bogmærke) til de enkelte sange)
Herefter har jeg de forskellige sange fortløbende
Sang nr. 7 fylder 3 sider (med page-break).

Hvordan får jeg udskrevet kun sang nr. 7 og ikke hele dokumentet?
Jeg vil helst at der ikke bliver genereret en ny side.
= en knap der udskriver fra A til B.
Knappen skal ligge i bunden af den pågældende sang.

Jeg ved godt at jeg kan lave flere sider, men i denne situation skal det kunne udgå fra ét html dokument.

Jeg håber I kan hjælpe mig.
Avatar billede sherlock Nybegynder
18. marts 2013 - 10:28 #1
Du kan prøve med jquery.print.js
https://gist.github.com/btd/2390721
Avatar billede olebole Juniormester
18. marts 2013 - 15:36 #2
<ole>

Du har da vel forhåbentlig ikke én lang side med mange sangtekster? Det lyder ikke særlig brugervenligt

/mvh
</bole>
Avatar billede Spicey Nybegynder
19. marts 2013 - 00:16 #3
Hej sherlock.

Det var det jeg søgte. Jeg er ikke så stiv i jquery. men jeg vil forsøge denne.
http://www.bennadel.com/index.cfm?event=blog.viewcode&id=1591&index=1

Der er Jquery.print.js og jquery-1.3.2.js kan man på nogen måde benytte et jquery-bibliotek på nettet, hvor de ligger, eller er det et must, at man har dem lokalt? - men skriv lige et svar så jeg kan give dig point.

mvh Spicey
Avatar billede Spicey Nybegynder
19. marts 2013 - 00:27 #4
Hej Ole.

Jo jeg har ét langt html-dokument :-) Meningen er at i stedet for at sende diverse sange til medlemmer, som dokumenter, pdf osv er det nemmest at samle det hele i et html-dokument, som jeg blot kan sende til medlemmerne. Nu har vi ikke en hjemmeside og en del medlemmer bruger kun deres mail og kan ikke finde ud af hvis der er mange sider. Der er selvfølgelig en oversigt over sangene øverst i dokumentet, så man kan "hoppe" direkte til den sang man vælger - og her skal den pågældende kunne udskrives. Så det er simpelthen langt da en del er 70+

mvh Spicey
Avatar billede olebole Juniormester
19. marts 2013 - 02:36 #5
Ja, så giver det jo ganske god mening  =)

Hvis/når jQuery.print.js virker, skyldes det udelukkende browseres overbærenhed med slamkode. Hvis det skal bruges, bør det først rettes af en webkyndig.

Men du behøver slet ikke jQuery til det her. En smule ganske almindelig JavaScript er rigeligt. Det viste eksempel:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Print Test</title>
<style type="text/css" id="printStyles">
body {
    font-family: verdana ;
    font-size: 14px ;
}
h1 {
    font-size: 180% ;
}
h2 {
    border-bottom: 1px solid #999999 ;
}
#printable {
    border: 1px dotted #CCCCCC ;
    padding: 10px 10px 10px 10px ;
}
img {
    background-color: #E0E0E0 ;
    border: 1px solid #666666 ;
    padding: 5px 5px 5px 5px ;
}
</style>
<script type="text/javascript">
var css = document.getElementById("printStyles").innerHTML,
strDoc = '<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>%{TITLE}%</title><style type="text/css">'
      + css
      + '</style></head><body>%{HTML}%</body></html>',
frPrint = document.createElement("iframe");
frPrint.style.cssText = "position:absolute;left:-10000em;width:1px;height:1px";
function doPrint(id) {
    if (!frPrint.parentNode) document.body.appendChild(frPrint);
    var elm = document.getElementById(id),
    _strDoc = strDoc.replace("%{TITLE}%", document.title).replace("%{HTML}%", elm.innerHTML),
    frObj = frPrint.contentWindow,
    frDoc = frObj.document;
    frDoc.open("text/html", "replace");
    frDoc.write(_strDoc);
    frDoc.close();
    frObj.focus();
    frObj.print();
}
</script>
</head>
<body>

    <h1>
        Print Part of a Page <em>Without</em> jQuery
    </h1>


    <p>
        <button onclick="doPrint('printable')" type="button">Print Bio</button>
    </p>
   
    <div id="printable">

        <h2>
            Jen Rish
        </h2>

        <p>
            Jen Rish, upcoming fitness and figure model has some
            crazy developed legs!
        </p>

        <p>
            <img
                src="jen_rish_crazy_legs.jpg"
                width="380"
                height="570"
                alt="Jen Rish Has Amazing Legs!">
        </p>

        <p>
            I bet she does some <strong>serious squatting</strong>!
        </p>

    </div>

</body>
</html>
Avatar billede Spicey Nybegynder
19. marts 2013 - 02:59 #6
Hej Ole. Jeg har set dit forslag og vil prøve det af, da jeg som sagt helst vil holde det inden for en enkelt fil = html dokumentet. Jeg vender tilbage :-)

vh Spicey
Avatar billede Spicey Nybegynder
19. marts 2013 - 03:17 #7
Hej Ole. Jeg får kun dette ud af ovenstående..

%{HTML}%', frPrint = document.createElement("iframe"); frPrint.style.cssText = "position:absolute;left:-10000em;width:1px;height:1px"; function doPrint(id) { if (!frPrint.parentNode) document.body.appendChild(frPrint); var elm = document.getElementById(id), _strDoc = strDoc.replace("%{TITLE}%", document.title).replace("%{HTML}%", elm.innerHTML), frObj = frPrint.contentWindow, frDoc = frObj.document; frDoc.open("text/html", "replace"); frDoc.write(_strDoc); frDoc.close(); frObj.focus(); frObj.print(); }

Under dette får jeg den originale tekst, knap og indrammet div-sektion.
Avatar billede olebole Juniormester
19. marts 2013 - 03:53 #8
Det lyder meget mærkeligt. Det kan jeg ikke eftergøre i nogen browser  =)
Avatar billede Spicey Nybegynder
19. marts 2013 - 04:16 #9
Jeg fandt denne løsning som fungerer..
----------------
  <script>
printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML
window.frames["print_frame"].window.focus()
window.frames["print_frame"].window.print()
}
  </script></b>
</head>
<body>
<h1><b>
<center>This is a test page for printing</center>
</b>
<hr color="#00cc00" width="95%"></h1>
<b>Div 1:</b> <a href="java script:printDiv('div1')">Print</a><br>
<div id="div1">This is the div1's print output</div>
<iframe name="print_frame" src="about:blank"
frameborder="0" height="0" width="0"></iframe>
<br>
<br>
<b>Div 2:</b> <a href="java script:printDiv('div2')">Print</a><br>
<div id="div2">This is the div2's print output</div>
<iframe name="print_frame" src="about:blank"
frameborder="0" height="0" width="0"></iframe>
<br>
<br>
<b>Div 3:</b> <a href="java script:printDiv('div3')">Print</a><br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" src="about:blank"
frameborder="0" height="0" width="0"></iframe>
<br>
<br>
<b>Div 4:</b> <a href="java script:printDiv('div4')">Print</a><br>
<div id="div4">This is the div4's print output</div>
<iframe name="print_frame" src="about:blank"
frameborder="0" height="0" width="0"></iframe>
</body>
</html>
---------------------

Jeg vil gerne give point til dig - da du viste mig hvad jeg specifikt skulle lede efter i min situation. Jquery er også godt, men kræver at man har det lokalt eller på sin hjemmeside - man kan også linke til det i sin "src" men som et enkeltstående (og langt) dokument fandt jeg frem til ovenstående der fungerer efter hensigten.

Så smid et svar så jeg kan give point - og tak for hjælpen

vh. Spicey
Avatar billede olebole Juniormester
19. marts 2013 - 15:07 #10
Tjaahhh ... hvis du ligefrem insisterer på at skrive skodkode, er det da en mulighed. Den gør det samme som de to andre forslag, men i ligeså dårlig kode som print.js

Hvorfor prøver du ikke bare at finde ud af, hvad du gjorde galt, da du testede #5? Den løsning er skrevet i valid kode - og den virker fint i IE, FF, Opera, Chrome og Safari  =)
Avatar billede Spicey Nybegynder
04. april 2013 - 03:30 #11
brugte ovenstående, der fungerer fint.
Avatar billede olebole Juniormester
04. april 2013 - 17:04 #12
Du bruger kun én IFRAME til at printe med, så man kan jo kun undre sig over, hvad alle de andre skal bruges til. At noget virker, betyder ikke nødvendigvis, det er godt  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:58 Netværk bliver ved med at "hoppe af" når jeg åbner for mange faner eller specifike spil Af Lars i LAN/WAN
I går 14:44 MS Outlook Af lbc i Office & Kontorpakker
19/0917:14 Udvid partition - Mulighed er nedtonet, ikke aktiv Af Uvanga i PC
19/0915:10 Debian og Windows Af DanishBear i Windows
19/0911:21 CHKDSK C: /r FEJL Af barth i Andet software
White papers
Flere white papers »


Premium
Teaser billede
Professor Christian Damsgaard: Her er de tre vigtigste sikkerhedsmæssige udfordringer ved at lægge dine data i clouden
Læs mere »
Her er Danmarks kommende AI-lov: Se det fulde lov-udkast fra regeringen
Microsoft vil træne AI på dine LinkedIn-opslag og kommentarer: Sådan undgår du det
Henrik Bodskov om sin exit fra Aeven: “Da jeg kørte ind på parkeringspladsen, løb tårerne lidt ned ad kinden”
Se alle »
Computerworld
Teaser billede
I aften sker det: Din iPhone får en monumental opdatering
Læs mere »
Alt om Apples store opdatering til iPhone, Mac, Watch og iPad
Microsoft tvangsinstallerer app i din Office 365 i næste måned: Du kan ikke slippe
Apple opdager alvorlig sårbarhed i ældre iPhones og iPads
Se alle »
CIO
Teaser billede
Til kamp mod legacy og teknisk gæld: Uffe har skrottet 200 servere og 1.000 routere og switches på 140 lokationer
Læs mere »
Microsoft opsplitter Office og Teams: Sådan fungerer opdelingen
”Det fylder helt oppe på direktionsgangene:" Danske topkonsulenter løfter sløret for det allervigtigste it-tema lige nu
Overgangen til Windows 11 kan udløse store bøder, hvis du ikke passer på
Se alle »
Job & Karriere
Teaser billede
Tryg skiller sig af med 225 it-medarbejdere: Outsourcer stor del af sin it-drift til indere
Læs mere »
Her er fidusen: Sådan fastholder KMD og Twoday deres it-folk i lang tid
Henrik Bodskov fratræder som topchef for Aeven: Her er den nye topchef
Novo Nordisks CIO og digitale topchef, Anders Romare, forlader selskabet
Se alle »
White paper
Teaser billede
Er I klar til at tage næste skridt på den digitale retailrejse?
Læs mere »
Sådan sikrer du nem og beskyttet adgang til dine ressourcer
Specialister med særlige evner: Din skjulte konkurrencefordel
Sådan får du succes med AI i hele organisationen
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »