Cara menggunakan download pdf link html

Question

Ada cara paling mudah ketika kita ingin menyimpan atau save html ke pdf menggunakan HP Android maupun PC tanpa perlu install software tambahan yaitu cukup dengan Google Chrome.

Table of Contents Show

Cara Simpan Halaman Web Sebagai PDF Di PC
Bagaimana cara menyalin link PDF?
Bagaimana cara mengubah html menjadi pdf?
Bagaimana cara mengubah file Chrome HTML ke PDF?
Kenapa link di pdf tidak bisa dibuka?

Kenapa pakai Google Chrome? karena hampir di semua pc maupun HP Android biasanya terinstall web browser yang satu ini. Selain itu ketika ingin menyimpan halaman web ke pdf dengan Google Chrome kita tidak perlu lagi menginstall extension atau add-ons.

Baca juga : cara convert file jpg ke pdf di HP Android.

Web browser Google Chrome versi PC maupun Android sudah dilengkapi dengan fitur untuk mencetak halaman web sebagai pdf dan bagi yang belum tahu bagaimana caranya, silahkan ikuti langkah-langkah yang akan kami jelaskan dibawah ini.

Buka web browser Google Chrome.
Kemudian silahkan browse atau buka halaman web yang ingin disimpan menjadi pdf.
Setelah halaman terbuka, pilih Menu – Cetak (Print).
Update : Jika tidak ada menu cetak/print pilih menu Bagikan – Cetak.
Akan muncul print dialog dan secara default akan menyimpan halaman tersebut sebagai pdf, silahkan sesuaikan pengaturan karena kamu juga bisa pilih save dengan warna hitam putih atau berwarna, terakhir pilih Simpan, selesai.

Cara Simpan Halaman Web Sebagai PDF Di PC

Selain di HP Android, di komputer/laptop kita juga bisa dengan mudah menyimpan html sebagai pdf dengan Google Chrome, dan berikut langkahnya.

Buka halaman web dengan Google Chrome.
Kemudian pilih menu Print (CTRL +P)
Pada Destination klik Change lalu pilih Save as PDF.
Jika tidak ingin ikut tercetak url halaman webnya maka pada Options hilangkan tanda centang Headers and Footers dan jika ingin background halaman tersebut ikut tercetak maka centang Background graphics.
Terakhir pilih Save kemudian tentukan lokasi penyimpanan dan pilih Save lagi, selesai.

Cukup mudah bukan convert html ke pdf tanpa aplikasi tambahan karena cukup menggunakan Google Chrome.

Jadi mulai sekarang jika kamu menemukan halaman web yang menarik kemudian ingin disimpan agar bisa dibaca lagi secara offline tanpa butuh koneksi internet maka pilihan paling tepat adalah simpan halaman tersebut menjadi file pdf menggunakan Google Chrome. Baca juga : cara membuka file pdf tanpa software.

<a href="myfile.pdf">Download Brochure</a>

The problem is when user clicks on this link then

If the user have installed Adobe Acrobat, then it opens the file in the same browser window in Adobe Reader.
If the Adobe Acrobat is not installed then it pop-up to the user for Downloading the file.

But I want it always pop-up to the user for download, irrespective of "Adobe acrobat" is installed or not.

Please tell me how i can do this?

Rob W

332k79 gold badges783 silver badges667 bronze badges

asked Dec 13, 2008 at 7:09

This is a common issue but few people know there's a simple HTML 5 solution:

<a href="./directory/yourfile.pdf" download="newfilename">Download the pdf</a>

Where newfilename is the suggested filename for the user to save the file. Or it will default to the filename on the serverside if you leave it empty, like this:

<a href="./directory/yourfile.pdf" download>Download the pdf</a>

Compatibility: I tested this on Firefox 21 and Iron, both worked fine. It might not work on HTML5-incompatible or outdated browsers. The only browser I tested that didn't force download is IE...

Check compatibility here: http://caniuse.com/#feat=download

answered Jun 9, 2013 at 15:46

T_DT_D

3,1013 gold badges16 silver badges23 bronze badges

6

Instead of linking to the .PDF file, instead do something like

<a href="pdf_server.php?file=pdffilename">Download my eBook</a>

which outputs a custom header, opens the PDF (binary safe) and prints the data to the user's browser, then they can choose to save the PDF despite their browser settings. The pdf_server.php should look like this:

header("Content-Type: application/octet-stream");

$file = $_GET["file"] .".pdf";
header("Content-Disposition: attachment; filename=" . urlencode($file));   
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header("Content-Description: File Transfer");            
header("Content-Length: " . filesize($file));
flush(); // this doesn't really matter.
$fp = fopen($file, "r");
while (!feof($fp))
{
    echo fread($fp, 65536);
    flush(); // this is essential for large downloads
} 
fclose($fp);

PS: and obviously run some sanity checks on the "file" variable to prevent people from stealing your files such as don't accept file extensions, deny slashes, add .pdf to the value

answered Dec 13, 2008 at 7:18

TravisOTravisO

9,2804 gold badges34 silver badges44 bronze badges

13

Don't loop through every file line. Use readfile instead, its faster. This is off the php site: http://php.net/manual/en/function.readfile.php

$file = $_GET["file"];
if (file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header("Content-Type: application/force-download");
    header('Content-Disposition: attachment; filename=' . urlencode(basename($file)));
    // header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit;
}

Make sure to sanitize your get variable as someone could download some php files...

answered Nov 14, 2011 at 13:35

Alex VAlex V

17.9k5 gold badges34 silver badges35 bronze badges

1

Instead of using a PHP script, to read and flush the file, it's more neat to rewrite the header using .htaccess. This will keep a "nice" URL (myfile.pdf instead of download.php?myfile).

<FilesMatch "\.pdf$">
ForceType applicaton/octet-stream
Header set Content-Disposition attachment
</FilesMatch>

answered Feb 9, 2012 at 10:24

Rob WRob W

332k79 gold badges783 silver badges667 bronze badges

3

I found a way to do it with plain old HTML and JavaScript/jQuery that degrades gracefully. Tested in IE7-10, Safari, Chrome, and FF:

HTML for download link:

<p>Thanks for downloading! If your download doesn't start shortly, 
<a id="downloadLink" href="...yourpdf.pdf" target="_blank" 
type="application/octet-stream" download="yourpdf.pdf">click here</a>.</p>

jQuery (pure JavaScript code would be more verbose) that simulates clicking on link after a small delay:

var delay = 3000;
window.setTimeout(function(){$('#downloadLink')[0].click();},delay);

To make this more robust you could add HTML5 feature detection and if it's not there then use window.open() to open a new window with the file.

answered Aug 6, 2013 at 14:59

Alex WAlex W

35.8k12 gold badges98 silver badges107 bronze badges

This is the key:

header("Content-Type: application/octet-stream");

Content-type application/x-pdf-document or application/pdf is sent while sending PDF file. Adobe Reader usually sets the handler for this MIME type so browser will pass the document to Adobe Reader when any of PDF MIME types is received.

answered Dec 13, 2008 at 7:27

Sudden DefSudden Def

9,5613 gold badges17 silver badges8 bronze badges

This can be achieved using HTML.

<a href="myfile.pdf">Download Brochure</a>

Add download attribute to it: Here the file name will be myfile.pdf

<a href="myfile.pdf" download>Download Brochure</a>

Specify a value for the download attribute:

<a href="myfile.pdf" download="Brochure">Download Brochure</a>

Here the file name will be Brochure.pdf

answered Nov 19, 2020 at 11:30

1

I know I am very late to answer this but I found a hack to do this in javascript.

function downloadFile(src){
    var link=document.createElement('a');
    document.body.appendChild(link);
    link.href= src;
    link.download = '';
    link.click();
}

answered Feb 24, 2017 at 18:48

Shivek ParmarShivek Parmar

2,7952 gold badges32 silver badges42 bronze badges

Try this:

<a href="pdf_server_with_path.php?file=pdffilename&path=http://myurl.com/mypath/">Download my eBook</a>

The code inside pdf_server_with_path.php is:

header("Content-Type: application/octet-stream");

$file = $_GET["file"] .".pdf";
$path = $_GET["path"];
$fullfile = $path.$file;

header("Content-Disposition: attachment; filename=" . Urlencode($file));   
header("Content-Type: application/force-download");
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header("Content-Description: File Transfer");            
header("Content-Length: " . Filesize($fullfile));
flush(); // this doesn't really matter.
$fp = fopen($fullfile, "r");
while (!feof($fp))
{
    echo fread($fp, 65536);
    flush(); // this is essential for large downloads
} 
fclose($fp);

Peter O.

31.2k14 gold badges77 silver badges92 bronze badges

answered Jun 21, 2012 at 2:15

SaillSaill

92 bronze badges

Here's a different approach. I prefer rather than to rely on browser support, or address this at the application layer, to use web server logic.

If you are using Apache, and can put an .htaccess file in the relevant directory you could use the code below. Of course, you could put this in httpd.conf as well, if you have access to that.

<FilesMatch "\.(?i:pdf)$">
  Header set Content-Disposition attachment
</FilesMatch>

The FilesMatch directive is just a regex so it could be set as granularly as you want, or you could add in other extensions.

The Header line does the same thing as the first line in the PHP scripts above. If you need to set the Content-Type lines as well, you could do so in the same manner, but I haven't found that necessary.

answered Nov 29, 2016 at 16:52

In a Ruby on Rails application (especially with something like the Prawn gem and the Prawnto Rails plugin), you can accomplish this a little more simply than a full on script (like the previous PHP example).

In your controller:

def index

 respond_to do |format|
   format.html # Your HTML view
   format.pdf { render :layout => false }
 end
end

The render :layout => false part tells the browser to open up the "Would you like to download this file?" prompt instead of attempting to render the PDF. Then you would be able to link to the file normally: http://mysite.com/myawesomepdf.pdf

answered Dec 13, 2008 at 7:49

btwbtw

6,8469 gold badges39 silver badges40 bronze badges

3

I solved mine using the whole url of the PDF file (Instead of just putting the file name or location to href): a href="domain . com/pdf/filename.pdf"

answered Jun 5, 2017 at 11:05

if you need to limit download rate, use this code !!

<?php
$local_file = 'file.zip';
$download_file = 'name.zip';

// set the download rate limit (=> 20,5 kb/s)
$download_rate = 20.5;
if(file_exists($local_file) && is_file($local_file))
{
header('Cache-control: private');
header('Content-Type: application/octet-stream');
header('Content-Length: '.filesize($local_file));
header('Content-Disposition: filename='.$download_file);

flush();
$file = fopen($local_file, "r");
while(!feof($file))
{
    // send the current file part to the browser
    print fread($file, round($download_rate * 1024));
    // flush the content to the browser
    flush();
    // sleep one second
    sleep(1);
}
fclose($file);}
else {
die('Error: The file '.$local_file.' does not exist!');
}

?>

For more information click here

answered Feb 6, 2019 at 5:30

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>File Uploader</title>  
    <script src="../Script/angular1.3.8.js"></script>  
    <script src="../Script/angular-route.js"></script>  
    <script src="../UserScript/MyApp.js"></script>  
    <script src="../UserScript/FileUploder.js"></script>  
    <>  
        .percent {  
            position: absolute;  
            width: 300px;  
            height: 14px;  
            z-index: 1;  
            text-align: center;  
            font-size: 0.8em;  
            color: white;  
        }  

        .progress-bar {  
            width: 300px;  
            height: 14px;  
            border-radius: 10px;  
            border: 1px solid #CCC;  
            background-image: -webkit-gradient(linear, left top, left bottom, from(#6666cc), to(#4b4b95));  
            border-image: initial;  
        }  

        .uploaded {  
            padding: 0;  
            height: 14px;  
            border-radius: 10px;  
            background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));  
            border-image: initial;  
        }  
    </>  
</head>  
<body ng-app="MyApp" ng-controller="FileUploder">  
    <div>  
        <table ="width:100%;border:solid;">  
            <tr>  
                <td>Select File</td>  
                <td>  
                    <input type="file" ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)" />  
                </td>  
            </tr>  
            <tr>  
                <td>File Size</td>  
                <td>  
                    <div ng-repeat="file in files.slice(0)">  
                        <span ng-switch="file.size > 1024*1024">  
                            <span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>  
                            <span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>  
                        </span>  
                    </div>  
                </td>  
            </tr>             
            <tr>  
                <td>  
                    File Attach Status  
                </td>  
                <td>{{AttachStatus}}</td>  
            </tr>  
            <tr>  
                <td>  
                    <input type="button" value="Upload" ng-click="fnUpload();" />  
                </td>  
                <td>  
                    <input type="button" value="DownLoad" ng-click="fnDownLoad();" />  
                </td>  
            </tr>  
        </table>  
    </div>  
</body>  
</html>

answered Feb 6, 2019 at 8:38

1

Bagaimana cara menyalin link PDF?

Menyalin, menempelkan, dan mengirin link PDF.

Di Drive, pilih file..

Klik Bagikan ..

Klik Salin link, lalu klik Selesai..

Kirim link PDF yang telah diubah. Saat link diklik, Anda (atau orang lain) dapat mendownload salinan file PDF..

Bagaimana cara mengubah html menjadi pdf?

Bagaimana cara mengubah HTML ke PDF.

Langkah 1. Unggah file html. ... .

Pilih "ke pdf" Pilih pdf atau format lainnya yang Anda inginkan (mendukung lebih dari 200 format).

Unduh file pdf Anda. Tunggu proses konversi selesai dan Anda dapat mengunduh pdf setelahnya..

Bagaimana cara mengubah file Chrome HTML ke PDF?

Cara Menyimpan Halaman Web Sebagai PDF Menggunakan Chrome.

Buka halaman web yang ingin kamu simpan..

Klik "File" dan "Cetak" di pojok kiri atas halaman..

Kamu bisa juga langsung menekan Ctrl + P (untuk Windows) dan Cmd + P (untuk Mac)..

Di bawah bagian "Tujuan", klik "Ubah" dan kemudian "Simpan Sebagai PDF"..

Kenapa link di pdf tidak bisa dibuka?

Alasan utama mengapa PDF tidak bisa dibuka adalah karena file tersebut corrupt atau mengalami kerusakan. Penyebabnya bisa beragam, di antaranya proses copy paste atau unduhan yang tidak menyeluruh, kerusakan pada harddisk, serta adanya malware atau virus dalam dokumen tersebut.

kode html