왜 Jquery에서 progressbar.js를 사용할 수 없습니까?

현재 Javascript 및 Jquery에서 node.js와 전자로 응용 프로그램을 만들고 있는데, 처음 실행하면 db 파일을 다운로드합니다. progressbar.js를 구현하여 파일 다운로드 중 다운로드 막대를 표시합니다. progressbar.js에 대한 설정 가이드를 따르면서 ourcodeworld.com에서 진행 상태의 자바 스크립트 다운로드를 구현했지만 내 전자 앱을 실행할 때 다운로드 막대가 전혀 렌더링되지 않습니다. 진행률 막대가 렌더링되고 다운로드 진행률을 표시하도록 전자에서 어떻게 작동합니까?왜 Jquery에서 progressbar.js를 사용할 수 없습니까?

HTML 코드

<body> 

    <div id="container"></div> 

</body>

자바 스크립트/JQuery와

  var bar = new ProgressBar.Line(container, { 
       strokeWidth: 4, 
       easing: 'easeInOut', 
       duration: 1400, 
       color: '#FFEA82', 
       trailColor: '#eee', 
       trailWidth: 1, 
       svgStyle: { width: '100%', height: '100%' } 
      }); 
      function progress() { 
       bar.animate(1.0); // Number from 0.0 to 1.0 
      } 

      function downloadFile(file_url, targetPath) { 
       // Save variable to know progress 
       var received_bytes = 0; 
       var total_bytes = 0; 

       var req = request({ 
        method: 'GET', 
        uri: file_url 
       }); 

       var out = fs.createWriteStream(targetPath); 
       req.pipe(out); 

       req.on('response', function (data) { 
        // Change the total bytes value to get progress later. 
        total_bytes = parseInt(data.headers['content-length']); 
       }); 

      req.on('data', function (chunk) { 
       // Update the received bytes 
       received_bytes += chunk.length; 

       progress(); 
      }); 

      req.on('end', function() { 
       alert("File succesfully downloaded"); 
      }); 
     } 
downloadFile("http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg", "./varbutterfly-wallpaper.jpeg");

fiddle

출처

2017-10-16 Anonymous

바이올린에 빌드 툴링이 없기 때문에 바이올린은 아무 것도하지 않습니다. 'require()'를 사용하지 않도록 고쳐야하고'downloadFile()'에 대한 호출을 JS 부분으로 옮겨야한다. 또한, '일하지 않는'부분에 대해 좀 더 자세하게 설명하십시오. 렌더링하지만 애니메이션화되지 않습니까, 아니면 전혀 렌더링되지 않습니까? – hayavuk

@hayavuk 전혀 렌더링되지 않습니다. 나는 지금 바이올린에 대한 그러한 변경을 할 것입니다. –

@hayavuk updated fiddle https://jsfiddle.net/Lm7kp3ka/2/ 전에 말했듯이 전혀 렌더링되지 않습니다. –

당신은 항상 1.0

function progress() { 
    bar.animate(1.0); // Number from 0.0 to 1.0 
}

과 발전에 가치를 부여 그래서

function progress(val) { 
    bar.animate(val); // Number from 0.0 to 1.0 
}

으로 변경하십시오 그리고 당신은 발견 할 것이다 볼 수있는 다음이

req.on('data', function (chunk) { 
    // Update the received bytes 
    received_bytes += chunk.length; 
    progress(received_bytes/total_bytes); 
});

에

req.on('data', function (chunk) { 
    // Update the received bytes 
    received_bytes += chunk.length; 
    progress(); 
});

에서 업데이트를 변경하는 모든 청크 업데이트에 대한 진행 상황 변화 total_bytes으로 나누면 모두 다운로드되고 1.0이면 다른 애니메이션이 필요합니다.

또는 애니메이션없이 정확하게 값을 설정

function progress(val) { 
    bar.set(val); // Number from 0.0 to 1.0 
}

로 진행 기능을 변경할 수 있습니다.

출처

2017-10-16 06:24:29

이 효과가 있습니다! 고맙습니다! –

언제든지 도와 드리겠습니다. –

:(미안, 나는 피들에 좋지 않다.하지만 우리가 사용하고있는 객체에 대한 참조가 엉망이라고 생각한다. Uncaught ReferenceError : ProgressBar가 정의되지 않았다. window.onload (window.onload @ (index) : 45' –

왜 Jquery에서 progressbar.js를 사용할 수 없습니까?

답변

관련 문제