search

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.18k stars 756 forks source link

Run pdf file with browser sync #1675

Open Scorpovi4 opened 5 years ago

Scorpovi4 commented 5 years ago

Issue details

What to do if I need to run pdf file from baseDir not manualy as i do now, but automatic when browser sync starts?! Set pdf as entry running, as index.html.

One more thing relates to this, how to force reload browser window where this pdf was opened? API as bs.reload doesn't match, actually it shows in terminal reloading but don;t make it in browser!

digzit commented 5 years ago

Hi @Scorpovi4 , I find work arround. I just use iframe to show the PDF in a html file:

const makePDF = () => {
  return download(URL_TO_PDF)
    .pipe(rename(PDF_OUTPUT_NAME+'.pdf'))
    .pipe(dest(PATH_TO_BUILD))
    .pipe(connect.reload())
}

const makeHTML = () => {
  return src(URL_TO_PDF)
    .pipe(add(PDF_OUTPUT_NAME+'.html', '<html><body><object style="width: 100%;height: 100%;" '+'data="'+PDF_OUTPUT_NAME+'.pdf'+'" type="application/pdf"><embed src="'+PDF_OUTPUT_NAME+'.pdf'+'" type="application/pdf" /></object></body></html>'))
    .pipe(dest(PATH_TO_BUILD)
    .pipe(connect.reload())
}

const watcher = () => {
  watch(PATH_TO_PDF).on('change', createShoppingListPDF)
}

/*
 * Tasks
 */
const createPDF = series(makePDF, makeHTML);
exports.createPDF = createPDF;
adamcbuckley commented 1 year ago

Inspired by @digzit's answer, I have found this works for me. I'm using Apache FOP.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<object style="width: 100vw; height: 100vh;" data="file.pdf#page=1" type="application/pdf"></object>
</body>
</html>

TIP: Set page=2 in the data URL to automatically go to page 2

Start browsersync

Rebuild the PDF to trigger the page reload