css 响应式pdf.js预览

8zzbczxx 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(150)

我试图在调整窗口大小时更新我的pdf预览。现在我的画布大小正在改变，但pdf预览保持不变。怎么找不到这样的方法呢？

var myState = {
        pdf: null,
        currentPage: 1,
        zoom: 1
    }

function domLoad() {
    myState.pdf.getPage(myState.currentPage).then((page) => {
 
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        var viewport = page.getViewport(myState.zoom);

        var heightRatio = 842 / 595;
        canvas.width = ((((595/941.39)*100)*window.innerWidth)/100);
        canvas.height = ((((595/941.39)*100)*window.innerWidth)/100) * heightRatio;
 
        page.render({
            canvasContext: ctx,
            viewport: viewport
        });
        
    updateCanvas(canvas);
    });
}

document.addEventListener('DOMContentLoaded', function(event) {
     
        pdfjsLib.getDocument('https://www.ecam.fr/wp-content/uploads/sites/3/2016/06/Exemple-fichier-PDF-1.pdf').then((pdf) => {
     
            myState.pdf = pdf;
            render();

        });

        function render() {
            domLoad();
        }
  })

  addEventListener("resize", (event) => {

    domLoad();

  });

  function updateCanvas(canvas) {
    
    var canvasParent = document.getElementById("pdf_container");
    var previousCanvas = canvasParent.querySelector('canvas');
    if(previousCanvas !== null) {
        canvasParent.removeChild(previousCanvas);
    }
    canvasParent.appendChild(canvas);
  }

body { width: 100%; height: 100%; }

<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
</head>

<body>
<a id="pdf_container" class="pdf_container" href="https://www.ecam.fr/wp-content/uploads/sites/3/2016/06/Exemple-fichier-PDF-1.pdf">
         </a>
</div>
</body>

当我调整窗口大小时，我试着移除画布，并暂时用另一个大小添加它。画布的大小正在改变，但里面的pdf预览不适合它。

css

来源：https://stackoverflow.com/questions/75116139/responsive-pdf-js-preview

1条答案

按热度按时间

jv2fixgn1#

阅读：This solution
我设法解决了这个问题，视口是答案。问题是getViewport的名称（它也可以是一个setter）：
var viewport =页面.获取视口（画布.宽度/页面.获取视口（我的状态.缩放）.宽度）;

var myState = {
        pdf: null,
        currentPage: 1,
        zoom: 1
    }

function domLoad() {
    myState.pdf.getPage(myState.currentPage).then((page) => {
 
        var canvas = document.createElement('canvas');
        canvas.id = 'pdf_renderer';
        var ctx = canvas.getContext('2d');

        console.log(page);
        var heightRatio = 842 / 595;
        canvas.width = ((((595/941.39)*100)*window.innerWidth)/100);
        canvas.height = ((((595/941.39)*100)*window.innerWidth)/100) * heightRatio;
 
        var viewport = page.getViewport(canvas.width / page.getViewport(myState.zoom).width);
        page.render({
            canvasContext: ctx,
            viewport: viewport
        });
        
    updateCanvas(canvas);
    });
}

document.addEventListener('DOMContentLoaded', function(event) {
     
        pdfjsLib.getDocument('../documents/cv.pdf').then((pdf) => {
     
            myState.pdf = pdf;
            render();

        });

        function render() {
            domLoad();
        }
  })

  addEventListener("resize", (event) => {

    domLoad();

  });

  function updateCanvas(canvas) {
    
    var canvasParent = document.getElementById("pdf_container");
    var previousCanvas = canvasParent.querySelector('canvas');
    if(previousCanvas !== null) {
        canvasParent.removeChild(previousCanvas);
    }
    canvasParent.appendChild(canvas);
  }

赞(0）回复(0）举报 2023-01-14

我来回答

css 响应式pdf.js预览

1条答案

相关问题

热门标签

最新问答